How to make creat-react-app build listen on 0.0.0.0 instead of localhost?

Question

I have a create-react-app bootstrapped project i want to deploy on an instance. Right now there are two ways that I have tried to set up the deployment which only ends up setting the port and not the host.

My project architecture is as below

Project
- Frontend
- Backend

My main issue is that although I am able to set the port on create-react-app build I cannot set the hostname to 0.0.0.0 instead of localhost.

In create-react app i hardcoded HOST=0.0.0.0 and PORT=443 in the start script.

Other thing i tried is have a script the serves the pages on port 443. Build serves on port 443 but not on 0.0.0.0.

Create-react-app scripts

"scripts": {
        "start": "HOST=0.0.0.0 PORT=443 react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

Basic script at the root of the project

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "client": "cd frontend && npm start",
        "client-prod": "cd frontend/build && npm install -g serve && serve -s build -l 443",
        "server": "cd backend && npm start",
        "sass": "node-sass -w frontend/source/styles/ -o frontend/source/styles/ --recursive",
        "dev": "concurrently \"npm run server\" \"npm run client\" ",
        "prod": "concurrently \"npm run server\" \"npm run client-prod\" "
    },

The development on localhost works fine but i need to able to serve my build pages on 0.0.0.0:443 instead of localhost

Answer 1

env file instead in the root of your project and set HOST=0.0.0.0 and if you also want to disable the automatic browser opening when you type yarn or npm start, you can also set BROWSER=none. Check this link for more info https://create-react-app.dev/docs/advanced-configuration/