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
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
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 can't access the app built with create-react-app from other devices on the same network using http-server package.
If i use http-server to serve an other react project it works fine to access the app from any device on the same network. But using create-react-app i can access the app only through the device which hosts the app, whether i use http-server or pushstate-server as suggested after running npm run build.
Any idea to solve this?
EDIT
I first create the build folder running npm run build and then I serve the build folder with http-server running http-server -p 9999 -o from the build folder and it works from my laptop which hosts the app, database and the API REST server, but if i try to access the app from another device on the same network using the laptop's ip address (connecting to e.g. 192.168.1.14:9999 from the smartphone's browser) it doesn't load anything returning ERR_CONNECTION_TIMED_OUT error from the browser .
Doing the same exact steps for another project that doesn't use create-react-app works fine for all devices connected to the same wifi network accessing the laptop's ip address (e.g connecting to e.g. 192.168.1.14:9999 from the smartphone's browser).
Simply run HOST=0.0.0.0 npm run start.
Afterwards open the url from another device on the network.
In your case, 192.168.1.14:9999 would work.
Documentation for setting HOST environment variables.
I am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!
PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.
The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.
Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.
Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.
Hope this helps!
I am working on ReactJS application using create-react-app.
The npm start and npm run build application is working fine, The application is running in a port number like 4000 or pushstate-server build in the port 9000, The problem is that I need to run the build application without port number in a public url like http://sample/home/ , when I browse directly the build/index.html it is showing the home page correctly but the routings is not working as like in port,All of the css and assets are showing not found.
Change the port to 80.
This is the default value for HTTP requests, so, when you try to access
www.google.com
in fact you are accessing
www.google.com:80
You have to serve your app with a webserver instead of Webpack Dev Server, which is a dev tool which is not made for production.
Checkout my answer here for more information: How can I serve a reactjs app through https?