Deploying ReactJs app in my machine through localhost - reactjs

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.

Related

Best practice for installing node_modules for a reactjs app on Azure Linux Web App

I have a react(specifically NextJS) web app running on a Linux Azure Web App Server. I have it deployed and working correctly via GitHub Actions. However, I'm having issues finding the most efficient way to deploy the node_modules.
Here's what I've tried.
I've ran the install and build within GitHub Actions and deployed the package as a zip artifact. However, the file was huge due to the node_modules and takes 10+ minutes to deploy.
I've created a postDeploy script to run after deployment that runs an npm install. Not sure if this is the best way to go about it so I reverted this.
For the startup command, I have azure running npm run start:prod. I thought about changing this to npm install && npm run start:prod . I'm not sure if this is a good idea either
What I've settled on so far is I just manually get on the server and run npm install after a deployment. This won't work for CI/CD though.
I've read that azure kudu supposedly detects package.json within the wwwroot folder and will automagically install dependencies but I haven't seen this work, nor could I find any documentation on it. So far, my best idea seems to be to change my startup command to run an install before starting the app but I'm not sure.
Any advice?
There shouldn't be a big difference between GitHub Action and Azure DevOps in that terms. But what should you do actually on your pipeline is run npm run build command and publish only produced output.
Please take a look here how it looks on Azure DevOps.

Do you need a web server to run a production build of a react app on a VPS?

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

How to deploy the build of a electron app like Sizzy?

I'm new to yarn, nodejs and react apps. I've tried running the Sizzy app and it works on my local XAMPP server if I first run yarn start in the cmd terminal and then access via http://localhost:3033, but after a while I have to rerun the same command. I've tried yarn build and then navigating to the build directory but that just loaded a page with a header, it didn't have the same functionality. And the contents of the build directory looks very similar to the contents of the public directory anyway.
I've had a look at this SO post and this one but still unsure why I need to run yarn start everytime.
UPDATE:
I'm still not sure how node, react, and electron fit together and why each is required, much research and learning still to do! Rather than a 'react app' I believe I'm looking at an 'Electron app'. I think if I run the command npm run package-win then I think I should get an exe file and some dlls. But how to instead setup for running on an Apache web server without having to start using the command line, or would you just have to build it with different architecture?
Starting to get a vague understanding from reading this.
If you used the npx create-react-app <app-name> then you just have to change the "start" script in the package.json file as "serve -s build". Run yarn add serve to add For deployment, Heroku is a good choice. Create a Heroku app and connect your git repo to the newly created app. Then go to the deploy tab and deploy your branch.

React Deployment on IIS 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/

Running react application in AWS EC2 server

I created react app using create-react-app.
I have deployed to aws.
How can I run it in production without using server like apache or nginx ?
Thank You.
You should install nginx on your EC2 instance.
Then, run npm run build. It will generate a build folder, that then should be used as nginx vhost webroot.
npm run build
Builds the app for production to the build folder. It correctly
bundles React in production mode and optimizes the build for the best
performance.
The build is minified and the filenames include the hashes. Your app
is ready to be deployed!
Simple as that.
Or,
For environments using Node, the easiest way to handle this would be
to install serve and let it handle the rest:
npm install -g serve serve -s build

Resources