I have a normal react setup, without CRA, which means I manually configured webpack and babel etc...
I currently have 2 scripts which run webpack :
package.json :
"scripts": {
"dev": "NODE_OPTIONS='--openssl-legacy-provider --max-old-space-size=8000' webpack --watch --config webpack.dev.js",
"prod": "NODE_OPTIONS='--openssl-legacy-provider' webpack --config webpack.prod.js"
},
when I run npm run prod, the issue does not happen and all the assets get compiled like normal. However, when i run npm run dev, after working for a while (less than an hour), the terminal kills webpack and shows the following:
I'm not sure what is happening here but I saw some recommendations to circumvent the issue by adding --max-old-space-size=8000 to the NODE_OPTIONS in the script.
However the issue persists. Any idea How to deal with it ?
I'd like to fork this repository and run it on my local server:
https://github.com/carbon-app/carbon.git
I am familiar with React but new to Next.js. The scripts in the package.json are specified as follows:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
How can I run this as a React project using npm? I'm interested in the React part to recreate another app using this app's frontend.
Please help me to run as a react project.
first, you should install dependencies:
npm i
then run next js in development mode using:
npm run dev
for more details, visit Next.js docs
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.
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)
I hope someone has already done this.
I am trying to set up a continuous build in teamcity for one my angular 2 project.
After done some research and I have followed the steps as follows:
Build Step1: installed the jonnyzzz.node plugin for the teamcity. (Now I can pick Node.js NPM from Runner type)
npm commands: I added install command
Build Step 2: Another Node.js NPM and npm commands: install -g angular-cli
So far so good
Now I wanted to build ng build as the third step and I am really stuck as I have no way to do this.
Any help would be appreciated.
Thank you.
Rather than changing your package.json you can use the node.js NPM plugin and the run command:
run build
build it not a default command for NPM so you need the 'run build' which is mapped to ng build in default ng-cli package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
See image
In order to get ng build work from nodejs plugin for Team city, I have modified the package.json file.
In start replace the value with "ng build".
And from team city, npm build command will trigger the ng build command.
First start with the build agents where you can edit the buildAgent.properties file and define 3 environment variables. You should have the surrounding single quotes here or later on in your build definitions:
env.exec.node='C\:\\Program Files\\nodejs\\node.exe'
env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js'
env.exec.ng='%env.APPDATA%\\npm\\node_modules\\#angular\\cli\\bin\\ng'
The %env.APPDATA% is used here but some setups may be installed on the Program Files, in most cases the AppData will be the one to take.
Next you can define build steps for your project. Create these new build steps of type Powershell and set Script as Source Code. Inside the Script Source you can now enter:
Install Angular CLI
& %env.exec.node% %env.exec.npm% install -g #angular/cli
Install node_modules folder
& %env.exec.node% %env.exec.npm% install
Build and publish solution
& %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path
After this step production builds will create your dist folder which you can include into your Artifacts paths so you have access to it should you want to create seperate Deployment type build configurations
Some considerations to take into account here:
You could define the variables inside your however
different paths may be used on the build agents, which would brake
your builds
Make sure you have proper Clean-Up Rules in place, since node_modules
folders can get big really fast
Hope it helps out someone!