create-react-app loading slowly of my production server - javascript

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.

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.

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.

Related

Why do i need to restart npm server everytime?

I am using VSCode for Reactjs and in the starting when i was learning reactjs, there was no need to restart the server but now after every modification, I have to restart the server and then only the changes are applied on the server
you were probably using nodemon or pm2 or similar tool to watch for file content during development.
on production, that feature is probably not used.
to verify this, looks for scripts section in the package.json file and see what command did you use to develop locally and run on production

I have to change static /js/css path after - npm run build #ReactJs

I build a react app using CRA. In deployment, we have different static servers to maintain js/css files. So I have to change static URLs after the build(npm run build).
For example,
in .env.staging I set,
PUBLIC_URL=http://api-testing.example.com/
when,
env-cmd -f .env.staging npm run build
I got "http://api-testing.example.com/" this in my js/css path.
After testing I have to change this url to "http://api-prod.example.com/"
Please help me. Post your ideas.

npm run build cannot access in localhost

I want to test my react/ node.js web app with a production build. I already run npm run build at the app directory and created build folder.
I was unable to run the application using localhost:8080 (server port).
Are there any ways to double check if the application is actually running in that port or access production-ready application?
PS. I used serve to host the application but it posts error 404: The requested path could not be found
Thank you for your help.
Every SPA application has its own package.json file. Inside you have to see the script section:
Normally after you run nm run build you have a compiled version of your code.
At this point, you have a see the dist folder.
After this, you can either run npm run start and you have to see
(this option is not suitable for SSR frameworks like NUXT or NEXT)
or if you don't have that option install an npm package that renders your compiled code by doing the following:
npm install -g serve
serve -s build
and you have to see

How to minimize size of Angular Projects (on development) to upload them to a Dev. server?

I am doing my first angular project and I have to upload it to a Development test server. Problem is that, an Angular project (event in default state) has so many files that it takes a lot of time to upload it.
I investigated and the .gitignore file seems only to be to avoid the commit of the files or folders specified there.
Could you please tell me if there is a way to minimize the number of needed files to upload and install or use them later, in local, in a safe way? Without risks of corrupting the project.
If you are using Angular CLI you can get a production build by doing
npm run -- ng build --prod
in the project directory. This will create a minified, bundled version of your app in the dist folder, ready for upload. You will then need an http-server running to serve these files.
As #yarz-tech suggested, the solution was to remove the node_modules each time I upload it. Then, when someone downloads it and wants to work with it again, must execute npm install. That allows npm to install all the dependencies our project needs, based on what is is specified on the package.json file, which appears not only for Angular projects, but for Node for example.
Thanks to everyone.

Using socket.io and express modules without npm

I am working on a project for an embedded Linux system (busybox made with buildroot). I am wondering if it is possible to use node.js modules socket.io and express without having to install or run npm. The goal is to be able to have buildroot configured to create a busybox image that simply includes node.js, and then place all my javascript files in the proper directory and execute node app.js from the command line to run the node application (which will use socket.io and express).
So, for example on my development machine (That does have node.js and npm installed), I could run npm install socket.io so it would get socket.io and all its dependencies and install it in the node_modules directory of my project. If I place all those files in a directory and move them to the production environment (embedded Linux with just node.js installed and where npm install socket.io was never run) would my application work?
If I place all those files in a directory and move them to the production environment would my application work?
Yes, it would. However, if you do have any binary dependencies, they need to be recompiled, so it's a bit trickier. If you don't, you'll be fine.

Categories