I'm not exactly sure about the best practices for something like this, but I have a simple web page with an index.html, style.css, and scripts.js where I call the Spotify API. I also have a server.js where I'm running my Node.js server.
In order to call the Spotify API, I need to supply my client ID, which I'm storing as an environment variable in my .env. Esentially I'm making my API call from the front-end but need to get the environment variable from the back-end. Is there a way to pass the environment variable from server.js to scripts.js, or be able to access the environment variable directly from scripts.js, or do i need to restructure my app?
Let me know if i can provide more info!
server.js
require('dotenv').config();
const express = require('express');
const app = express();
const path = require('path');
const port = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.sendFile(path.join(__dirname, 'public/index.html'));
});
app.listen(port, () => {
console.log(`Listening at port ${port}`);
})
scripts.js
...
function getAccess() {
const responseType = 'token';
const CLIENTID = process.end.CLIENT_ID;
let redirect = `https://accounts.spotify.com/authorize?response_type=${responseType}&client_id=${CLIENTID}&scope=${scopes}&redirect_uri=${redirectUri}`;
window.location = redirect;
}
...