(edited)
I have deployed an Spotify app I hva build in react with vite. But now it does not work.
So I have a vercel.json file in my root :
{ "builds": [ { "src": "api/server.js", "use": "@vercel/node" }, { "src": "client/package.json", "use": "@vercel/static-build", "config": { "distDir": "client/dist" } } ], "rewrites": [ { "source": "/api/(.*)", "destination": "/api/server.js" }, { "source": "/(.*)", "destination": "/client/index.html" } ] }
This is my server.js which is placed in /api/
import express from 'express';import SpotifyWebApi from 'spotify-web-api-node';import cors from 'cors';import bodyParser from 'body-parser';
const app = express();app.use(cors());app.use(bodyParser.json());
// Create a SpotifyWebApi instance and configure it with your client credentialsconst spotifyApi = new SpotifyWebApi({clientId: process.env.SPOTIFY_CLIENT_ID,clientSecret: process.env.SPOTIFY_CLIENT_SECRET,redirectUri: process.env.SPOTIFY_REDIRECT_URI,});
app.post('/api/refresh', (req, res) => {const refreshToken = req.body.refreshToken;
spotifyApi.setRefreshToken(refreshToken); // Set the refresh token
spotifyApi.refreshAccessToken().then((data) => {res.json({accessToken: data.body.access_token,expiresIn: data.body.expires_in,});}).catch(err => {console.log(err);res.sendStatus(400);});});
app.post('/api/login', (req, res) => {console.log('received login request with code:', code);const code = req.body.code;
spotifyApi.authorizationCodeGrant(code).then(data => {res.json({accessToken: data.body.access_token,refreshToken: data.body.refresh_token,expiresIn: data.body.expires_in,});}).catch((err) => {console.log(err);res.sendStatus(400);});});
app.get('/api/userSubscriptionLevel', async (req, res) => {const token = req.headers.authorization.split(' ')[1];
spotifyApi.setAccessToken(token);
try {const response = await spotifyApi.getMe();const product = response.body.product;res.json({ product });} catch (error) {console.error('Error fetching user subscription level:', error);res.status(500).json({ error: 'Failed to fetch user subscription level' });}});
app.get('/api/search', async (req, res) => {const { term, offset = 0, limit = 20 } = req.query;const token = req.headers.authorization.split(' ')[1];
spotifyApi.setAccessToken(token);
try {const response = await spotifyApi.searchTracks(term, { offset, limit });res.json(response.body);} catch (error) {console.error('Error searching Spotify tracks:', error); // Log the detailed errorres.status(500).json({ error: error.message || 'Failed to search tracks' });}});
export default app;My vite.config:
import react from '@vitejs/plugin-react';
export default defineConfig({plugins: [react()],build: {outDir: 'dist',assetsDir: 'src/assets',},define: {"process.env": {},},server: {port: 5173,proxy: {'/api': {target: process.env.VITE_API_URL || 'http://localhost:3001',changeOrigin: true,rewrite: (path) => path.replace(/^/api/, ''),},},},});Somehhow the callback from Spotify doesn't work. But I doublechecked the enviromentals and they seem just fine. What do I miss?
Link to the app: https://walkify-alpha.vercel.app/
