When I test my webapp locally, it works fine. But after deploying the web app to remote host, I get the error
Invalid Host Header
After going through a couple of blogs already I understand that I need to add the remote host on allowedhosts list. The react-scripts sits in the node modules, and I am not sure how we can pass that arguments easily such that app is able to render on localhost for development and testing purposes and is able to load on remote host for production purpose.
Related
I have built a react app using a truffle box that uses create-react app. I can get the app running on my local host but I can't see it on my VPS when I go to the IP address of my VPS and I run exactly the same commands and I get the same output in the terminal. I go in to my client dir and run npm start. I have tried to make a build and run the build through an http server in the client dir and the root folder of the VPS.
I run
serve -s build
All I can see is the index of the build in the browser when I try and serve the build through a webserver. When I run npm start on my localhost I can view my app but it doesn't work on my VPS. Please help me I've been struggling with this for days and its the last part of my project.
You need a webserver in any case.
When you do a local development, you do use webpack dev server (which is inside of create react app).
For the production, you need to make a production build and serve it for example by nginx. Here some details how to create production build with CRA https://create-react-app.dev/docs/production-build
On your screenshot, you don't see your site, because there is no entry point in your folder. By default it should be index.html
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I am working on a React app and trying to find a way to have it served from a local network server while I work on it, instead of localhost:3000.
The app files would be in a shared directory on the server so I could work on them from my machine. But when I npm start, the app would be accessible from the LAN and from the outside via the server.
The goal is to avoid having to build/deploy every time someone else needs to have a look at the app (which is often).
Is that even possible ?
I suggest using https://ngrok.com/. After you install it, npm start your react app and in another terminal type ngrok http 3000, it will then provide you with external public facing urls anyone can access.
If you're using VS Code you can use the Remote Development Extension Pack to SSH into the local network server and mount the workspace accordingly. You just need to setup the remote host (or subsequent ssh-exposed container) as an SSH server.
what is the best way to deploy a react web app (ex. employee database) on the local area network only? i'm using create-react-app and i'm almost done with the code but after that, i don't know what to do. it was easier to do this in php/mysql with the help of xammp. but i would like to do this using react this time. thank you
The react is already working in your local lan IP
for example your local lan ip is 192.168.1.20 you and your react running port is
localhost:3000
other PC's mobile devices laptop could already access the server in your PC via
http:/192.168.1.20:3000
just make sure you enable it to be allowed in your firewall usually the antivirus does not permit is so try to set enable in the firewall settings in your antivirus and windows firewall
If your app is totally static you can serve it with a web server after building. When you are done with your app first build it with:
yarn build
After this you will have all your static files in your build directory inside your project. build/static/js and build/static/css contains bundled js and css files. Those files are being attached to your index.html file. So, when you serve this directory with a web server like a regular html site, you can use your app.
By default
type npm run build
after a build is successful then,
type serve -s build
it will give you URL
use that with IP to other devices connected in the same network.
I am testing a multi module App Engine project. Every time I run the application using dev_appserver.sh I ca see different ports getting assigned to a module which is not default.
Is there a way I can fix the port numbers for the non-default modules in dev server.