Reactjs + Nodejs + Nginx - Website is loading so long - node.js

Well, i installed nginx on VPS (ovh.com)
then i put all files into /root/directory_site
then i setup nginx config:
server {
listen 80;
server_name 54.38.184.210;
location / {
proxy_pass http://54.38.184.210:3000;
proxy_buffering off;
}
}
Now i got 2 problems
First one: After you go to http://54.38.184.210/
it's loading so long! Like 5-6 seconds before i see anything on website, i can only see the index title before, i think it might be the proxy_pass problem, but i don't how to fix it. It's impossible to load site like this that long, the server is fast, and my connection too!
(it's loading so long only when you try first time, so maybe it's something with cache?)
Second one:
i got errors like this in console:
[WDS] Disconnected!
What the hell is it? i never had it before on my local server!
What's the problem then? Im starting my website using "npm run dev"
you can try to access to the site, it's taking ages before it starting loading anything, where is the problem? Please help me!

WDS is webpack-dev-server, please never use development tools in production.
Why you got things fast locally? Because most heavy file, bundle.js, is loaded to browser from localhost, and you can load locally many Mb before it start to get long.
In proudction though you need to load bundle.js via internet, where speed is times slower. This is why good practice is to make your bundle.js under 2Mb and why in production build your bundle.js goes trhough minification process. Not only code, but assets, like images must be compressed, otherwise you going to load all this super long.
Also many packages has additional optimizations, when they built with environmental variable NODE_ENV=production. So please use minification tool, like uglifyjs, compress your assets and do not use any development tools/packages in production.

You are hosting the site directly off webpack-dev-server. This is bad and you should take this down right away. You need to make a production build and deploy it properly with the command npm run build if you are using create-react-app. Doing this will fix both issues.
Webpack Dev Server is for development purposes only and adds extra bloat to your app to make it easier to debug. This should not be used for a live server.

Related

Local server for Firebase Hosting causing frequent HTTP errors in React app

A developer working in Cebu City, Philippines is receiving frequent networking errors using a common configuration between Firebase and Create React App. We use firebase serve to start a local server for static assets in one terminal window. It starts up:
i hosting: Serving hosting files from: build
✔ hosting: Local server: http://localhost:5000
In a separate window, we run yarn start on a Create React App repo with a "proxy": "http://localhost:5000", entry in the package.json file. We frequently observe the following error:
Proxy error: Could not proxy request /__/firebase/8.1.2/firebase-app.js from localhost:3000 to http://localhost:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (HPE_INVALID_CONSTANT)
with ERR_STREAM_WRITE_AFTER_END exceptions killing the Create React App process.
Note: occasionally the error does not occur.
I can't replicate this problem in the US. With all of the software configurations I can think of being equal, I suspect there might be networking issues in the way as the firebase server does its Reserved URL "magic".
Do you think I'm on the right track to suspect a networking problem? If so, can anyone assist with lower-level networking config that might alleviate the problem? (I'm thinking connection/timeout adjustments).
If you init your project from hosting URLs in public/index.html (like me), try to update URLs to the latest version (8.2.3), so all scripts would look like this:
<script src="/__/firebase/8.2.3/firebase-app.js"></script>
This is what worked for me. I hope so :)

How do I setup nginx on a nuxt.js website preferably on Heroku

I am having a problem setting up nginx on a webserver.
I am deploying my application on Heroku and I need to have nginx infront of nuxt.js.
The docs say a little on how to use nginx on nuxt but only a little. They describe a
conf file but they do not state where to put the conf file. And then they go all the way to Laravel.
I am using node.js and vue.js and I turned to nuxt.js thinking it was easier to set up nginx on it.
Any help will be appreciated.
OK.
Finally, after giving up 5 times I have set up nuxt.js with nginx heroku buildpack.
For those who are interested in how I did it checkout this repository.
https://github.com/rsgilbert/hellonuxt.
In there you will find a file called hellonuxt-steps that covers all the steps I took. From creating the nuxt app to deploying and then to setting up nginx and redeploying. You can benefit even though you are not using nuxt.
These are some of the important webpages I visited that really helped me understand what's happening and how to set up nginx:
Have you managed to make your node nginx proxy setup on Heroku work?
Heroku + Node (Parse server) + nginx not working
https://elements.heroku.com/buildpacks/beanieboi/nginx-buildpack
https://github.com/heroku/heroku-buildpack-nginx
The last one was really annoying. For instance, they say "You touch /tmp/app-initialized when you are ready for traffic" ?? What's touch?

How to use Nginx to load pages through express router

So I'm building an end to end application (With node.js/mysql back end, react front end, and using the express router), but I'm having trouble setting up a local development server. I don't need it to be accessed from the outside world, just be able to load different pages connecting to the express router. I don't have any dev ops experience for this, so I'm trying to use nginx to point it to the router which I can't figure out. Is there an easier way to do this?
I also need to run this on a windows machine, which just makes everything slightly more complicated
It's not entirely clear from your description how your application is set up and what the role of Nginx is.
So I'll start from the beginning...
Nginx is primarily an HTTP server which can also function as a proxy for HTTP requests. If you've written a Node.js application using Express, you have written an HTTP server which can handle any routes you have set up and can also serve your static assets (ie. HTML pages, images, front-end Javascript, CSS, etc.). In this case, there is no need for Nginx - if you wrote something like the Express "Hello World" app, then you will see a message like "Example app listening on port 3000" and you can connect to your app by visiting http://localhost:3000 in your browser.
That's it - there's literally nothing else to your app and there is no need for Nginx (or any other HTTP server) to run your application.
Now that's not to say that there is no role for Nginx in your application, but it may not be as an HTTP server. One possibility is that you may want to set up Nginx as a proxy, to handle certain routes by sending the requests to your Node application. For example, I set up an application some time ago which uses Nginx to proxy API routes for my application to a Node application and to serve static assets directly. This may be what you have in mind - if it is, you will need to configure different routes in Nginx to serve different things (and unfortunately there's not enough information in your question to give suggestions on this).
As an aside, you're probably going to find this much easier to set up using Linux - perhaps the Windows Linux Subsystem, a virtual machine running Linux, or Docker.
You'll probably want to use
https://github.com/facebook/create-react-app
create-react-app my-app will set up everything you need (webpack, etc.), and then
npm start will start a local development server.
Should work on Windows, but I don't know, because I wouldn't use/recommend Windows ;-)

Run socket.io chat app in a website that's already running on wampserver

I have recently made this socket.io chat app with the help of online videos. But the problem is I modified the code and now I want to integrate it in a bigger website like a social network.
The problem, apparently, is the code can't find the socket.io.js file even though it is in it. I know you would usually run a server from gitbash, but it is already running one so why run gitbash as well?
The exact error is:
GET http://localhost/socket.io/socket.io.js ERR: NET ABORTED
This is causing all the trouble.
Also, any opinions on doing all of this in php. I can do it in php, it's easy.
You're trying to load the file from
http://localhost/socket.io/socket.io.js
HTTP requests directly to localhost will go to localhost port 80 by default, which you probably don't have a server running on.
Change the source of the js file to the port that your app is running on, should look like this:
http://localhost:3000/socket.io/socket.io.js

Starting Node js app

So I created a node app that uploads pictures and the app works locally, I can upload stuff from all of my home devices and they end up in my designated upload folder. Next thing is to go global, so I moved the app to an FTP server and... I don't know how to start it. I can't go
node server.js
like I do on my PC in cmd, can I? I open my index page but when I upload something I get: Server responded with 0 code. Just like when I open my index.html without starting the node app trough cmd on my PC. I'm a front-end guy and I don't know almost anything about servers and I've searched quite a bit around the internet, but to little avail.
One fairly quick way to get this set up would be to sign up for a virtual server on Amazon using their EC2 server instances. Just choose the basic instance (whichever one is free for the first year) and then install Node and run npm install on your root directory once you have uploaded the files. Also if you are going to want this site accessible with your own domain you will have to set up an elastic IP address also available via Amazon (AWS). Furthermore if you want to have your url accessable via the standard port 80 (meanning that you don't have to type your url:[port number]/path then you might want to look into setting up a reverse proxy using something like nginx.
I know this sounds like a lot and i won't lie to you this is kind of complicated but there is a lot more to getting a node application up an running that you might expect.
Before a node app can run on a server you need to make sure that:
Node is installed
npm install has successfully run / or all dependencies must be transferred to the app directory in the right place
The port of the node server should be reachable, so the routing must be set up correctly.
Also, you can't start a program from an ftp prompt usually.

Resources