I used "npx create-react-app testreact" to create a react project. When testing from browser on my PC, the server returns a blank page, other than the expected words —— "Learn React".
What's happening here? how to fix it?
Cmd Sequnce
npx create-react-app testreact
npm install
npm start
Env Info
nodejs: v13.2.0
npm: 6.13.1
system: 18.04.1-Ubuntu
reverse proxy server: nginx
Code Info
repo: https://github.com/nautilusshell/testreact.git
there is folder called node_modules which was created by "npm install", I didn't put into above repo because it is too big and not necessary to upload.
by the way, actually I didn't change anything.
Err Info
visit http://52.130.83.55/image_editing
from browser I got:
the .js files whose status equal 404 all locates at http://52.130.83.55/static/js/xxx.js. This path was told by my chrome browser, but I searched my server, by command
find / -name "0.chunk.js" 2>/dev/null, only to find that there are no such files.
For example, http://52.130.83.55/static/js/0.chunk.js was not found anywhere on my server.
Nginx Config
repo: https://github.com/nautilusshell/nginx_config.git
Your nginx configuration has the following block:
location /image_editing {
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
client_max_body_size 1000M;
proxy_pass http://image_editing;
}
This block presumably points anyone who visits [hostname]/image_editing is shown your React App, however it does not rewrite the path. This means that if you visit localhost/image_editing, the path is still /image_editing in the browser.
Any paths to assets, such as /static/js/bundle.js (note the leading slash), which is used by default by CRA, will not go to the webserver hosted by Create React App but instead will hit Nginx itself. You have no configuration to forward requests to /static to the same server as /image_editing, so all of those requests will fail.
In other words, when you visit yourdomain/image_editing, the index.html of your React app is sent back declaring that all of the assets are located at http://yourdomain/static. This request hits Nginx and Nginx correctly serves 404 because it does not know about those assets. You need to configure your React App such that it 'thinks' that the assets are actually located at http://yourdomain/image_editing/static/.
To solve this, you need to modify the publicPath property of the webpack configuration of your project. Unfortunately, this will require ejecting your Create React App configuration using npm eject.
You could also resolve this on the Nginx side using subdomains. For example, you could host your image editing app at image-editing.yourdomain.com and all of the URLs with leading slashes would resolve correctly.
Related
Locally, I use ExpressJS on port 3001 and then start my react app with npm start which runs the development server on port 3000. This allows me to route requests as a proxy from 3000 to 3001.
For production, I installed Ubuntu NodeJS 6.12.13 on 16.04 on a DigitalOcean Droplet and then installed Nginx and PM2.
In my Nginx default file I have set the following:
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
I've moved over my Express and React setup and added the Express server to the PM2 startup. Nginx is being used as a reverse proxy server to use Express on port 3001. Here is the PM2 startup (www is the name of the server file which runs Express).
When I load my domain, I receive the Express default page:
Now I'm not sure how to start the react app, because it doesn't seem logical to start it using npm start and keep the terminal open for a production server. I need to see my React app when I visit the domain instead of the Express message.
I've found articles which mention to use npm run build but they don't explain how to then run the React app. Sorry I'm new to this, but any help would be appreciated. Thank you.
You won't run the React app because there is no such a thing :) After building your app all your files bundled in a single Javascript file. You are using start for your React app in development for development purposes.
After doing:
npm run build
you will have a build directory in your app directory. Just copy all the files and directories from this build directory to your server where your Nginx's default directory points.
If you don't want to open your regular app codes in developer tools of browsers, delete build/static/js/some_file.js.map and build/static/css/some_file.css.map before uploading your files to server. Those are source map files which are for debugging purposes. If you include them, in developer tools everyone can see you files directly. Your code actually open to world, to anybody right now but with a bundled, uglified and minified way. If you include source map files, they will be opened as they are.
This is how you run a static app. Without a backend, means here without Express, just using a web server.
But, since your question involves Express I assume you are using a backend server. So, one method is copying all your project to your server again with all backend and frontend code as you are using in development. Build your React app. But this time instead of starting both an Express server and React development server, on your server you will only run Express. Express will be the one serving your frontend. You should have already configured this in your development and done some production tests.
So, if you don't use a backend server you don't need Express or any other thing apart from a single web server. If you use a backend server then you need something like Express to serve both your backend requests (like to API's) and your React app. In addition you will need something like PM2 to run Express and optionally Express to use proxies for different apps.
I am using nodejs for web application. In this I am frustrated with continuously firing command "npm start" when applying small changes on any files.
Question 1 : Is there any way for how to keep automatically call my "npm start" without opening command prompt?
Question 2 : And also I want to remove this port display in url.
I want like below result, example:
Current url: http://localhost:3200/login
Expected url: http://localhost/myprojectname/login
node-dev will automatically restart your application whenever you save a code change. Install it with npm install -g node-dev then run your application with node-dev server.js (or whatever the entrypoint file for your project is called if not server.js).
For development, it's easiest to just live with the port in the URL. To get rid of it, you need to run your application on port 80 which requires running as root which is insecure. There are ways to do it (via ngrok iptables, nginx, etc, but most developers opt to just deal with the port in the URL during local development
Try nodemon module, Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.Perfect for development on local machine, you no longer need to deal with npm start every time when you change the code.It will automatically restart the server and changes will be reflect instantly.
install it globally
npm install -g nodemon
then try to run your app using nodemon app.js instead of npm start or node app.js
If you want to use port 80, you should run your application with root/administrator privileges, and make sure no other service is running on that port another solution is which I strongly recommend is to use nginx server reverse proxy settings .Install nginx server on your machine, Following are the settings that you can apply using nginx reverse proxy to remove any port number you want from the url.
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:3000/;
proxy_redirect http://localhost:3000/ https://$server_name/;
}
}
Hope this helps you.
I have the latest weinre installed (2.0.0-pre-I0Z7U9OV). I can start it, all is working fine, but I need to run it behind a Nginx Proxy to be able to use a trusted SSL Certificate. So what I tried is the following:
upstream weinre {
server 127.0.0.1:8080;
}
server {
...
location /weinre/ {
proxy_pass http://weinre/;
proxy_set_header Host $host;
}
}
The site is opening, all fine, but when adding the target script to my mobile page, I can't see it appear in the targets list. So I started to dig into it and found the follwing in the Chrome console:
POST https://domain.net/ws/target 404 (Not Found)
Why is it POSTing to ws/target and not weinre/ws/target? Since everything else is working under the weinre sublocation.
Is it even possible to run weinre under such setup?
Not quite sure what's going on there; what is the URL of the of the target script you are embedding in your page? It's possible to override the URL of the weinre server, instead of having it calculated from the target script, by setting the global window.WeinreServerURL, as you can see in the Target.coffee file. You can see how the server URL is used to get the URL to the "socket" URL here.
I've been trying to get Ghost.io installed on my web server for quite sometime. I have a VPS with Centos 6 and Cpanel.
Today I found a script at http://www.allaboutghost.com/one-click-ghost-install-script/ that said you could just enter a command into your ssh terminal and have it all installed for you.
Command
wget -O - https://raw.github.com/howtoinstallghost/installghost.sh/master/installGhost.sh | sudo bash
I did this and it appears to have worked, I didn't get any errors but now I am not able to find the install in either FileZilla or by using my web browser. The website says that it installs in the /var/www/ghost/ directory but I can't find that. If I use cd /var/www/ghost/ in the ssh it takes me right to it and even lets me edit the config.example.js file.
If I direct my browser to www.mydomain.com:80 since the site says it installs on port 80 it just takes me back to my home page.
What am I missing and what do I need to do?
As Per the comments, I did follow the instructions on the github page. Now All I get when I visit mydomainname.com/ghost/
Ghost is installed really easy. You'd better don't use 3rd party scripts for that as it might really vary from system to system. All you need is to get Node.js installed and then follow instruction for example from here: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-ghost-on-ubuntu-16-04. They are very detailed and must work for Centos as well.
Most common errors are:
- Not configuring a reverse proxy (nginx or apache) to link to your ghost install on port 2368. Here is an example for Nginx:
server {
listen 80;
server_name your_domain_or_ip_address;
location / {
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:2368;
}
}
If you now see default home page it means some web server is already running and intercept all the requests and parks them to a default location (e.g. /var/www)
- If you want Ghost to be the one and the only web server on your VPS, you have to remove or shut down currently installed web server and try to configure ghost to answer on port 80 like this:
server: {
host: '0.0.0.0',
port: '80'
}
I didn't test it but has to work. This kind of install is not recommended and insecure. I suppose you can configure reverse proxy from Cpanel, but not sure.
The best and easiest way to set up Ghost is using SSH.
Hope it helps. For any further help, you have to provide more details and possibly logs and configs. Most of the possible errors you'll catch when installing or starting your blog with npm
sudo npm install --production
sudo npm start --production
Good luck with your deployment.
Hey you don't need to do that much you can just launch ghost from digitalpress for free...
Know how to host ghost blog for free out here : https://treanches.digitalpress.blog/hosting-ghost-blog/
You can think this as self promotion but this article is so much understanding you won't regret reading it
I need the right configuration of nginx for my problem.
Suppose the nginx + nodejs serverprograms are running on the same debian machine.
Domain name for my website is for simplicity just webserver.com (and www.webserver.com as alias)
Now, when someone surfs on the internet to "webserver.com/" it should pass the request to the nodejs application which should run on a specific port like 3000 for example. But the images and css files should get served by nginx as static files and the filestructure should looke like webserver.com/images or webserver.com/css .. images + css should get served by nginx like a static server
Now it gets tricky:
But when someone surfs on webserver.com/staticsite001 or webserver.com/staticsite002 then it should get served by the nginx server only. no need for nodejs then.
And for the nodejs server, I am just setting up my nodejs application with port 3000 for example to receive the bypass from nginx for webserver.com/
to put it in a more understandable language: when someone surfs to webserver.com/staticsite001 it should NOT pass it to the node application. It should only pass it to the node application if its inside of the first webserver.com/ directory that the outsiders can see. The webserver.com/staticsite001 should only get serverd by nginx.
How, how do I do that ? And what should the http and server block look like for the nginx configuration look like?
I am familiar with nodejs. But I am new to nginx and new to reverse proxying.
thanks
the file structure on the debian hard drive looks like:
/home/wwwexample/staticsite001 (for www.webserver.com/staticsite001/) only handled by nginx
/home/wwwexample/staticsite002 (for www.webserver.com/staticiste002/) only handlex by nginx
/home/wwwexample/images
/home/wwwexample/css
and in
/home/nodeapplication is my node js application
This server block should work:
server {
listen 80;
server_name webserver.com www.webserver.com;
root /home/wwwexample;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
}
location /staticsite001 {
}
location /staticsite002 {
}
location /images {
}
location /css {
}
}
First location makes nginx to proxy everything to localhost:3000. Following empty locations instruct nginx to use default behavior, that is to serve static files.
Put this code into file /etc/nginx/sites-available/my-server and create a symlink to it in /etc/nginx/sites-enabled. There is a default config, which you could use as a reference.
After that you could use command sudo /usr/sbin/nginx -t to check configuration. If everything is OK use /etc/init.d/nginx reload to apply new configuration.