How to make my react app run permanently in ec2? - reactjs

I made a portfolio website with create react app and I opened an ec2 instance to run my website, when I'm using the ssh command "sudo npm start" afterward the site is running, but when I close down the ssh my website is not online anymore, How can I make my site run indefinitely?

You want to run this as a background service using systemd.
Try taking a look at: https://medium.com/#benmorel/creating-a-linux-service-with-systemd-611b5c8b91d6.

Related

"npm start" command in react app opens up 'nginx' welcome page on browser

running "npm start" command shows a 'nginx' welcome page on browser instead of the default 'react app' starter page. I recently started practicing using docker, where i had to run "docker pull nginx", i think this is what started the problem as far as running 'npm start' in my react app folder. I did not have this problem prior to working with docker. I want to be able to run 'npm start' inside my react app folder and have it show my react app page in the browser and not the nginx server welcome page.
I'll hazard a guess that you have a docker container running and you've configured it to map ports on your machine to port in the container. If that's the case, you should just terminate the container. Here's an example of doing this on Windows via cmd.exe:
C:\Users\HPierce>docker container ls
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
14a8bc9fc077 transcripts_web "tail -f /dev/null" 11 days ago Up 4 seconds 0.0.0.0:80->80/tcp, :::80->80/tcp transcripts_web_1
C:\Users\HPierce>docker container kill 14a8bc9fc077
14a8bc9fc077
C:\Users\HPierce>docker container ls
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
You can see that the container was mapping my host's port 80 to the container's port 80.
If you have no containers running, here's a few other things you could try:
Change the port that create-react-app listens on
Check if Nginx is installed on your host machine and remove it or stop the server from running.

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.

Deploying ReactJs app in my machine through localhost

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.

Using create-react-app with "npm run dev"

I am developing a React JS app on a remote server which uses Apache.
In the past I have built a React JS app manually with webpack/babel etc. and then used "npm run dev" to run the app.
With this method I could see any errors on the fly in the terminal and test in the browser automatically through the web browser.
I am now creating a new site with create-react-app which takes care of a lot of the tedious setup for you. One thing I cannot figure out is how to use something similar to "npm run dev". My two options seem to be:
npm run build - This takes a while and I have to rerun it every time I change my code. It does put the updated code in the /build directory which I can link to from my Apache server and see in my browser.
npm start - I can see any errors right away in the terminal, but I cannot see it in my browser because it runs on localhost and does not get compiled to the build directory.
What can I do so that I get the best of both worlds? Having quick rebuilds / error reporting and being able to see remotely through my Apache server?
Or would it be better just to go back to my old manual way of doing things?

Resources