npm start
starts the react server on the default browser, which is Firefox for me. I like Firefox for browsing but prefer Chrome in web development for its developer tools. Is there a way to force "npm start" to start the server with Chrome, without changing my default browser to chrome? I am using Bash on Windows.
Edit: I used "create-react-app" to create my server and this adds a script to "packages.json" file for "npm start". The script starts the localhost server with the default browser. How do I modify the script added by "create-react-app" such that it starts with a different browser?
This is possible with the BROWSER environment variable.
You can also do it directly in the terminal:
BROWSER=chrome npm start
This is described in the Advanced Configuration docs:
By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension.
Also note that the browser names are different on different platforms:
The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows.
As you have mentioned that you are using create-react-app for creating react app and you want chrome to open on hitting npm start. Set BROWSER variable in package.json present in your project in the following manner:
Replace:
"start": "react-scripts start"
With:
Linux:
"start": "BROWSER='google-chrome-stable' react-scripts start"
Windows:
"start": "BROWSER='chrome' react-scripts start"
OS X:
"start": "BROWSER='google chrome' react-scripts start"
Method by using .env file in the root of your NodeJS app.
BROWSER="firefox developer edition"
Using above technique, you may end up with error
'BROWSER' is not recognized as an internal or external command, operable program or batch file.
To over come this
Do an npm install of cross-env in your cloned repo:
npm install --save cross-env
Try to use this command in the package.json file
"start": "cross-env BROWSER=chrome react-scripts start"
BROWSER is an environment variable, and you can use the cross-env package to properly handle it.
I don't like to repeatedly create a new .env file or prepend npm start every time with an additional command. You can specify your browser of choice instead of none in your shell config file. Type in your terminal the following commands:
echo export BROWSER=none >> ~/.bashrc
source ~/.bashrc
At this point you can run npm start and be happy.
Simply add the env-cmd package as global
then create a .env file and write a variable with a specific Browsers path
after that add the env-cmd just in your start script
in the terminal
npm install -g env-cmd
in the .env file
BROWSER= "your browser path"
like => BROWSER= "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Edge"
in the package.json add the env-cmd
"scripts": {
"start": "env-cmd react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
that should work!
In Windows cmd, set env variable for desired browswer:
set BROWSER=chrome
Then just run npm start like normal
Change your default Browser setting in windows, if it does not work then open your visual studio code and change the script browser to:
"start": "BROWSER=chrome react-scripts start"
for Brave browser it is BROWSER=brave-browser npm start
If you want to change the default browser when you are running a npm start or yarn start, the simplest way to do that is edit your package.json file.
Many are not comfortable dealing with environment variables using the terminal.
This is what your scripts section should look like:
"scripts": {
"start": "BROWSER=none react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
In the above scenario it would not open any browser at all, you are free to choose your development browser and continue your work(I prefer this one). However, if you want a specific browser then you can replace BROWSER=none with any of the following:
BROWSER=firefox
BROWSER=google-chrome-stable
BROWSER=vivaldi
Suit yourself.
This is how I solved mine:
I opened the application on vsCode, then via the terminal I ran "BROWSER=Chrome npm start".
on windows, the easies way with create-react-app was to add BROWSER="C:\Program Files\Google\Chrome Dev\Application\chrome.exe"
to my .env.developmennt.local file in each CRA project. I use a different browser without dev extensions as the default one set in the system.
There is one package called set-default-browser https://www.npmjs.com/package/set-default-browser
just download package from there and add following code
var setDefaultBrowser = require('set-default-browser');
setDefaultBrowser("chrome");
Or you can just run this set-default-browser chrome
Thanks!
On Mac, this method:
"start": "BROWSER='firefox developer edition' react-scripts start"
works on 'react': '17.0.1' together with 'react-scripts': '4.0.1'
But it is not working on 'react': '18.0.1' together with 'react-scripts': '5.0.1'.
On 18.0.1 it continues to open in the default browser set on my computer. So I have sometimes reverted back to using the older React version but do not want to continue doing this as I do need the newer version in some cases and it's just easier to install the most recent version using create-react-app.
Any suggestions?
If you are using another browser like Brave, here is an example on how to modify the package.json file.
In Mac OS
"scripts": {
"start": "BROWSER='/Applications/Brave Browser.app' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
To open in chrome we need to set it as a default browser.
Setting --> Default browser --> Make default -->
and choose chrome if any other browser is chosen.
It worked on windows 10.
Add script to your package.json file
"devserver": "live-server --browser=Chrome"
If you are a Windows user then go to Sitting -> Default apps -> Web browser then select your desired browser.If you are a Linux user then go to System-settings -> Details. (Note: In older versions of Ubuntu Details is called System Info)
Related
I was building a simple React app using Tailwind. I used create-react-app and then installed tailwind. I have done this many times before.
In order to install Tailwind, I also had to install craco and change package.json "scripts" to use craco, like so:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
However, this time, when I ran npm start, I got an error that I had never encountered before:
Error: error:0308010C:digital envelope routines::unsupported
So I searched on StackOverflow and someone suggested adding --openssl-legacy-provider to my "start" script like this:
"scripts": {
"start": "craco --openssl-legacy-provider start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
And it's working now. But can somebody please explain to me what --openssl-legacy-provider actually is and how it works?
Due to changes on Node.js v17, --openssl-legacy-provider was added for handling key size on OpenSSL v3.
You somehow have installed the latest version of node.
Restore your previous version of nodejs.
Go and manually remove the node dependency(e.g. "node":17.4.3) from package.json
and packagelock.json.
Delete node_modules folder and use npm install to reinstall node_modules.
I have seen many answers regarding the OpenSSL issue that people encounter due to the changes on Node.js v17. Personally, I encountered the problem in a vue.js/electron application after switching to my new MacBook with M1 chip.
This GitHub issue lists multiple options that worked for different users.
In my scenario, adjusting the script commands in the package.json file worked:
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
I've seen user replacing th export with a run command.
Keep in mind that the syntax might differ on another Os. For example:
Set and set
The full issue with all possible answers.
Adding --openssl-legacy-provider in package.json sure works, but if you don't want to use the legacy SSL provider, you can upgrade your webpack- and react-scripts versions.
I had to first delete package_lock.json and node_modules/. Then I ran:
npm install --save-dev webpack#5.74.0 --legacy-peer-deps
npm install --save-dev react-scripts#5.0.1 --legacy-peer-deps
npm install --legacy-peer-deps
After this, I tested with:
npm start
I also had to fix a few other issues, but eventually got it working.
I have found a solution in this GitHub issue
and it works for my case.
For Node.js v17+, you need to put the openssl-legacy-provider flag after your command, for example:
From npm --openssl-legacy-provider start to npm start --openssl-legacy-provider start
From npm --openssl-legacy-provider build to npm start --openssl-legacy-provider build
... and so on.
I had this error in Nuxt 2.15
I fixed the error in the following way.
package.json edit
I had Ubuntu so this method worked for me
"scripts":{
"dev":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
My partner had Windows but the above method didn't work on it, then this method worked
"scripts":{
"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
The most interesting thing was that it worked in other ways in Ubuntu and Windows
I read following documentation described nest command.
https://docs.nestjs.com/cli/scripts
According to the document, following must be added to package.json
"build": "nest build",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
What are the --watch and --debug options?
According to the nestjs start docs the actual uses are as follows;
--watch
Run in watch mode (live-reload)
Alias -w
Source files which are saved with changes are automatically compiled without the need to manually run npm run start to trigger webpack compilation after every change.
For example, typescript files with changes (on save, or when using git) in src will be compiled to javascript files in dist (depending on your setup)
--debug
Run in debug mode (with --inspect flag)
Alias -d
The --debug flag actually runs the node process using the --inspect flag to allow native debugging using an IDE or otherwise. Once the node process is running, you can use an IDE to connect to to the node debug address and port (default 127.0.0.1:9229) and use breakpoints* to pause execution.
*However, do note that the above at present isn't completely accurate. IDEs usually need the --inspect-brk flag (for breakpoints) and it seems there is still a problem with the nestjs implementation.
Some IDEs (for example VS Code) can get around this with an auto-attach feature and it seems --debug is not even needed. Although very easy to set up, it is not as streamlined when developing multiple running node apps.
In general, --watch means the terminal will stay open and watch for any file changes and then reload the server. --debug means it will log more messages to the console (e.g. info or warnings), which can be helpful for debugging.
I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.
I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.
I'm trying to get get it so that I don't have to re-build with npm every time I make changes. I'm working with Vue.js as my front-end framework, and Python-Flask for my MT.
When I was first working with Vue, I was just messing around and had no MT code. I had the following in my package.json:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --host 127.0.0.1 --port 5000 --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
Running:
npm run dev
Would open up a browser window with the hosted Vue application, and would automatically update anytime I made changes.
Now that I've added Flask to the mix, I already have the application hosted with Flask, and I just want my Vue application to auto-refresh as I'm working on it. Currently, the only thing that works is to build after every change, which is quite tedious.
I don't really know npm very well, and I can't seem to find any documentation on this. Any help would be much appreciated!