CODEWITHSUNDEEP
javascriptcreate-react-app
xiaozhu
xiaozhu

Reputation: 43

create-react-app loading slowly of my production server

I am try to search this question by google.But not helpful for me. I hava a demo of create-react-app. Run it in localhost(npm start), that work well when browser disable cache.for example: localhost

The step was run npm run build in localhost.then scp -r build server:/home/deploy/app/.run it by nginx. Then open the browser to run,that initialization or refresh slowly when disable cache too. for example: server

you could find load 500KB js file need 15seconds in server.

I guess that is a relationship with bandwidth. My server bandwidth was 1M/s.but i'm not sure.

ps: I'm sorry I forgot to declare the specific environment, but I did these steps.

Upvotes: 2

Views: 6333

Answers (2)

Ishan Marikar
Ishan Marikar

Reputation: 116

If you're running this in production, I wouldn't suggest you running the web-application with npm start on the server.

A much better solution would be to run npm run-script build by which you'd get a response as such:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  48.12 KB  build/static/js/main.9fdf0e48.js
  288 B     build/static/css/main.cacbacc7.css

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  sudo npm install -g serve
  serve -s build

You could either do serve -s build or set up nginx or apache to serve the files (it's just html, css and js). You could also use Github Pages to host it.

Upvotes: 2

dsalin
dsalin

Reputation: 11

Are you missing the build step?

If yes, try npm run build or yarn build. It will output an optimized version of your app to ./build directory. You can then host it on your server with nginx or other server setup. More info here: official docs

When you do npm start npm starts the development version of your app. It includes some debug code, error checking and live refresh.

Upvotes: 1

Related Questions