Why my React App does not fire up in browser automatically? - node.js

Question

I am learning React now. I create the app by using
npx create-react-app .
npm start
Then I get:
Compiled successfully!
You can now view recipe_app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.11:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
The compilation works fine, but the application does not open in my browser (I use firefox.) automatically, so I have to manually open it by typing the URL in my browser. I thought React should fire up the app by default? I am not sure what is wrong. I tried the following solutions but none of them work.
Use BROWSER=firefox npm start in my terminal.
Set BROWSER variable in package.json:
// package.json
"scripts": {
"start": "BROWSER='firefox' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
or add cross-env in the scripts
// package.json
"scripts": {
"start": "cross-env BROWSER='firefox' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
None of these solutions work. The application can be compiled successfully but it just does not open up in my browser. Here is my full package.json file:
{
"name": "recipe_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"cross-env": "^7.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"chrome": "BROWSER='google-chrome' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I am using vscode 1.55.2, firefox 88.0, npm 6.14.11, node v14.15.1, and Ubuntu 20.04.2 LTS. Can anyone help me? Thank you!

Answer 1

I figured it out. It is because $DISPLAY is not in the environment variables of the vscode's integrated terminal.
In order to fire up firefox, I need to set export DISPLAY=:0. But this is a one-time fix.
I do have $DISPLAY in my zsh terminal, clearly, vscode does not inherit it. So I need to set the inheritEnv to be true in the setting.json file.
Open ~/.config/Code/User/settings.json, and set:
"terminal.integrated.inheritEnv": true
Then re-start vscode. To ensure your modification works, just type in your terminal:
echo $DISPLAY
:0 // you get this
You are good to go.