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
Related
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 create a reactJs App. But for now I run this app through Intellij idea and I would like to deploy it and run permanently in my machine without turning on through Intellij idea. How I could deploy react app and run it as deployment in my machine
If you created your app with create-react-app, you should be able to start local development server from the command line. To do this, open you project's root directory in the terminal and type npm start.
If you would like to create and serve a production bundle, you should build your project with npm run build and then serve build directory with a web server. The easiest way to do this is install serve via npm (npm install -g serve) and run serve -s build
For this purpose only webservers available like Tomcat, Payara, Whildfly, etc. You can install any one of those servers and deploy your application into that. As on when you started the server your application will be accessible.
Approach 1:
You can set up the server into your IDE and simply run the project on server mode.
Approach 2:
By using your project code, create a war file with the help of any build tool like MAVEN/GRADLE, etc. Then login into the server manager(Tomcat Manager) and deploy the generated .war file in deployment section.
Note: With the 2nd approach, you can access the application as on when you start the server.
I would like to deploy my react app to IIS and I tried a step by step guide.
I already tried a create-react-app and I already added a new website but when I run It says:
this site can't reach
.
I tried that way but some steps are not understood.=>create-react-app on IIS 10
I am newbie and May I know step by step if possible.
Thanks.
I suggest you could try belwo steps to host a reasct app on the IIS.
If you don't have the react app, I suggest you could install the npm and generate a react app for testing.
1.Open cmd and locate a folder by using cd yourfoldername
2.Run below command to add the package
npm i -g create-react-app
3.Run below command to create the react app in the folder, wait for creating the application
create-react-app my-app
Build the project to production folder.
npm run build
5.Open IIS management console and create a new web sites and use the build path as the physical path. for example: D:\ReactAppTest\my-app\build
Notice: You should pay attention to your port number.
Then you could use that port number to access your react application. For example:
http://localhost:9965/
I have a working react.js application, which works using npm start (app built using create-react-app).
When I try to run npm run build, it builds the application. I serve it using
serve -s build -l 3000
It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server.
I have proxy statement in package.json to connect to server on port 3300. This works in development mode but in production mode it seems to not pickup the proxy settings in the package.json.
Please guide... this is my first time switching to production mode... any guidance on switching to production mode would help.
BTW I use react-loadable as well...
The proxy field in package.json is only used in development by webpack-dev-server. You can learn more about this here
Thanks for all the help guys....
Finally, I understood that "npm run build" just creates the static files to deploy. But how to use it, is our hands. :)
I copied the build folder inside the /server folder and added the following line in my root server.js file itself. Basically, served the static files from /server/build folder and it all works beautifully.
app.use('/', express.static(__dirname+'/server/build'))
Thanks for the support. :)
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!