I'm developing a react application.When I try to deploy it using npm start it is showing that your development build is not optimized.Use npm run build to install production build.
The message means exactly what it says. Use npm run build to make a production build, and serve those built static files with some http server like nginx or apache. Your current npm start is making a debug build, and probably serving it with a hot reloading server.
To identify the differences between a production build and a debug build, check out your underlying build system and its configurations.
Related
I'm currently using NextJS and to run a production build, I use npm run build followed by npm run start. This all works well on my local machine.
However, I need to deploy this app on an offline machine where I may not have an internet connection to install all the node packages.
I've taken a look at npm pkg and npm pack utilities, but not quite sure which is the best one to use in the context of a nextjs app.
Would appreciate any advice on the best way to do this.
Edit: thinking along the lines of how I would build my maven project and have a .jar output which I can use to deploy to any other machine as a single deployable file.
Say I have a node.js application (some web server for the manner of sake). So I have a directory structure with a src which contains my code and a package.json which includes some metadata about my project and all the packages needed to run it. So I run npm install to get all the packages and run node server.js to run the application.
I have a CI pipeline for my application that upon PR to master runs tests, and if succeeds, merges to master. The next step I want is to deploy the application on a server.
This means that eventually I need my source code plus all the dependencies on the server, and run node server.js.
Is it correct to publish my application as a package (as part of the CI pipeline), and then on the server run npm install to fetch it? Or is npm installing packages only makes sense for packages that serve as some functionality for other applications?
The reason I doubt this is that when you run npm install (at least on a directory with a package.json) you get all the packages in the node_modules directory, which makes me believe that the second option I stated is true.
NOTE
The application is running on a Windows server, no Dockers.
EDIT:
My question is now whether it is possible to launch a react app with react-scripts in a production-like environment where I don't necessarily want changes to files to affect the running react server. check below in Solutions section under C for a brief description on what I have already tried.
I have been struggling with this question for the past two weeks and I am unsure how to proceed. I would like to host my React App on a Node Azure Web App (Linux).
The problem I am seeing:
Starting the development server...
events.js:170
throw er; // Unhandled 'error' event
^
Error: ENOSPC: System limit for number of file watchers reached, watch 'xxx'
at FSWatcher.start (internal/fs/watchers.js:165:26)
at Object.watch (fs.js:1274:11)
at createFsWatchInstance (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:80:15)
...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! some-repo#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the some-repo#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/u/.npm/_logs/2019-08-30T09_50_59_595Z-debug.log
Solutions attempted:
After reading up on this issue online I have understood that the solution might involve
A: no space on the system. I have checked using df -h and looks like there is plenty of space (at least 50% for my machine).
B: file watcher limit reached, this seems to be the problem but unfortunately the Azure Web App is a read-only file system, and running something like echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p did not help.
C: Disable watching with React. It doesn't appear that I can do this however, if anyone is aware of how to Disable watching with React it would be very much appreciated. So far I have tried CI=true npm start to no avail (when I ran command and made a change to a file, the change was actively reflected on my browser: localhost:3000
I have also tried adding a multitude of options inside of node_modules/react-scripts/webpack.config.js such as:
watch: false and ignore:/node_modules/.
Thanks,
Nik
I suggest you to reconsider your goal to launch a react app with react-scripts in a production-like environment.
As #adamz4008 mentioned, you shouldn't run development server on production. Therefore, you won't hit the watching issue, and you don't need to solve it.
Documentation / best practices
According to software development best practices there are different phases of the development.
Facebook React documentation covers them as well.
Develop locally
npm start / yarn start
Runs the app in development mode.
https://github.com/facebook/create-react-app#npm-start-or-yarn-start
Build
npm run build / yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed.
https://github.com/facebook/create-react-app#npm-run-build-or-yarn-build
Installing NPM dependencies
BTW, usually people run npm install before npm run build to install all necessary dependencies.
But I recommend to use npm ci. It has deterministic stable results and higher performance.
https://docs.npmjs.com/cli/ci.html
Release / Deploy
As your application is just a bunch of static files, you can simply deploy it as static HTML web site to any web server / platform.
My experience
In my practical experience with Azure, I deploy React app to a storage account as a static web site (without using/configuring any web server explicitly).
https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
You can choose any other option.
So something you could do is create the build file and then serve the static files in the directory with a tiny local server.
You could run the yarn build then have a script that runs this code yarn node ./server.js (or whatever you name it)
This could allow for the performant builds and the server similar to the DevServer that react-scripts start server.
I also don't know if you need profiling in production but I added a feature on react-scripts build --profile that allows classnames and functions names to persist through the terser.
const express = require(`express`);
require(`dotenv`).config();
express()
.use(express.static(`${__dirname}/build`))
.get(`*`, (req, res) => res.sendFile(`${__dirname}/build/index.html`))
.listen(process.env.PORT || 1234, () => console.log(`__SERVER_RUNNING__`, process.env.PORT),
);
For the simple case (your app resides in the server root, you have no client-side routing, you don't have to proxy backend calls):
For the first time, install http-server with yarn add --dev http-server
Build the application with yarn build
Serve the built application with yarn http-server ./build
For more complex cases, either use a more advanced webserver like local-web-server or implement the desired behavior yourself using express as described in other answers.
some background:this is my first react application and my assumption is build in react is similar to binary files in c++
question : this is for a react application which sole purpose is to run locally. is there anyway we can do npm start only with build
have tried to delete the src folder after building.
expected result is the app should run as usual.
actual result : app crashes saying, index.js file is missing
npm start won`t work with build version,
you need to install serve and run build using serve locally on your machine
npm install -g serve
serve -s build
ref: https://facebook.github.io/create-react-app/docs/deployment
I am trying to deploy a Nestjs API (with Auth0 authentication). When I run it in VS Code with npm run start:watch server, everything's fine.
Now the question is: what should I do to deploy it on a webserver? Should I only copy the dist folder (after runnin tsc)? what about node_modules? Should I leave the port to 3000?
As a side note I am trying to deploy it on Azure but I guess the questions holds for any platform.
Many thanks!
Modify your package.json file, and add a postinstall script, this script should be tsc or tsc --sourceMap false if you would like to avoid sourceMaps from being generated.
That would make azure to run tsc after installing all npm packages, remember to change start script also, so its value is 'node dist/index.js'