Currently, I am in the process of developing a project that encompasses both backend and frontend components. It struck me as a great idea to have both sets of code housed within the same directory, complemented by another npm script responsible for running them simultaneously.
The only issue I encountered is the inability to configure the port setting specifically for the frontend package. Within my main package.json file, I have included the following:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start-app": "cross-env SERVER_PORT=8080 npm start --prefix ./frontend",
"start-server": "cross-env SERVER_PORT=8080 npm start --prefix ./backend"
This setup functions perfectly for the backend, yet falls short when applied to the frontend section.
It should be noted that the frontend boasts a standard configuration:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
Upon examining the project's environment variables, it becomes apparent that while the SERVER_PORT value is present in the backend, it remains absent from the frontend set-up.
(Typical scripts found within a new npm package are utilized for the Backend):
"scripts": {
"start": "node main.js",
"test": "echo \"Error: no test specified\" && exit 1"