Running react and flask using a single shell script - reactjs

I have built an application that uses a ReactJS as frontend and Flask as middleware. I'm able to execute it using the following sequence of commands.
npm start
cd Equation-Solver
python -m flask run
After executing the first command, I have to open another terminal window and execute the next 2 commands. I would like to execute them together using a single shell script. Any help would be really appreciated.

Create a shell script. Add an ampersand at the end of the npm start line. This backgrounds that process. The other commands will then run. In this case the react app will show on the terminal, but the python app will be running also.
npm start &
cd Equation-Solver
python3 -m flask run

Related

Build, npm serve, npm forever: how to keep alive a deployed site ( react + nodejs)

I deployed a website (React + node.js) using a VDS (hostvds).
I installed apache 2, npm serve and npm forever.
The problem:
I can't keep alive frontend and backend at same time when i quit puTTy..
What i did to deploy the application:
-To run the backend, I use: forever server.js (using VDS console)
-To run the frontend, in /var/www/html folder, where i moved my front build folder, I use serve build (using puTTy)
Everything works perfectly, but when i quit puTTy the frontend stop to work.
Could someone tell me how to run and keep alive frontend?
Thanks
The problem you're facing is that the command you run in the front is attached to the tty and when you close the connection the command dies as well. This is not happening on the back because the forever tool detach it so it can effectively run forever. Your question can be summarized as "How to run multiple commands in detached mode?" A quick search give some results that can achieve what you are looking for, for example using screen. Yo have multiple approaches:
Op1: Using Screen
# run backend command
screen -dm "npm start"
# run frontend command
screen -dm "npm start"
Note that the screen command is used to create new sessions and detach them from the tty. So nohup could handle your issue.
and
Op2: Using systemd service
Another, and more robust way is using services of systemd and handling the lifecycle using systemctl command. In this way you can define restart policies (autorestart when failed) and also autostart when the machine reboots. You would have to create two different units, one for back and one for front.
Create the files
/etc/systemd/system/backend.service
[Unit]
Description=My backend
[Service]
Type=simple
Restart=always
User=nobody
Group=nobody
WorkingDirectory=/your/back/dir
ExecStart=/usr/bin/npm start
[Install]
WantedBy=multi-user.target
/etc/systemd/system/frontennd.service
[Unit]
Description=My frontennd
[Service]
Type=simple
Restart=always
User=nobody
Group=nobody
WorkingDirectory=/your/front/dir
ExecStart=/usr/bin/npm start
[Install]
WantedBy=multi-user.target
Once the files are created you can handle the service lifecycling with systemctl:
Run the apps:
systemctl start [backend|frontend]
Stop the apps:
systemctl stop [backend|frontend]
Check status:
systemctl status [backend|frontend]
To enable the autostart on boot just enable the service(s) using systemctl enable [backend|frontend]. You can disable it using `systemctl disable [backend|frontend].
Op3: Static frontend
Doing the options 1 and 2 will solve your issue, but have in mind you are serving a frontend using npm when it could be build to static files and served using apache2 directly, which will reduce cpu/memory consumption and it would be much faster. This is just regarding the frontend, the backend is dynamic and it needs the option 1 or 2.
As you mention it I assume you know how apache2 works, so just build the frontend application to generate plain html, css and js files, then move them to the apache2 folder and it will serve the files to the users for you.
cd /your/front/folder
npm run build
cp -r build/ /var/www/html
More info on how to build the statics here
Summary
Running commands in a shell will attach them and if you close the shell they will die unless you detach them. You can use detaching tools like screen or nohup, or you can change the approach for this specific scenario and use services to handle the lifecycle (apache2 is also a service).
Why don't you try to use forever for the front-end as well? If I remember well, the whole point of the forever service is to keep the command running even if you stop the terminal. I would try something like forever start -c "npm start".

Shell script to launch Go and React applications from root directory

I have a React-Go application set up in as follows:
--root -> (client & server)
Is there a way to launch both applications (npm run start & go run .) from the root directory, maybe using a shell script?
Go and React App in their subdirectiories
If layout of your project is:
root
|-client (React)
|-server (Go)
you can add shell script or Makefile to simply run both apps. Super naive shell script running two subshells, one for each component would look like:
#!/bin/bash
(cd client/ && npm start) &
(cd server/ && go run .)
Starting Go server using npm start
Assuming layout of project is something like typical React app:
root
|-node_modules
|-public
|-src
|-server (Go code)
|-package.json
|-go.mod
...
You can add your go command to package.json start command like this:
"start": "react-scripts start & go run ./server"
where ./server is path to main package of Go application. Note that it can be literally anywhere (even complete different directory or above the React app, etc.)
Running npm start will then bring up both React and Go apps.
In both cases you will have to send SIGINT (press CTRL+C) multiple times to terminate node.js and then Go app. You can overcome this by writing better shell script.
NOTE: This is only suitable for development; for production you probably want to use pre-built Go binary and both parts under proper service manager that handles crashes of either part gracefully.

Stop React dev server while continuing parent script execution

I need a test.sh (bash)/test.ps1 (powershell) shell script of the following structure:
<build preparation>
npx react-scripts start
<build cleanup>
The build cleanup step should run after I stop the localhost development server.
Currently, if I send Ctrl+C to the terminal, it stops both the dev server as well as the parent script, so the build cleanup step is not executed.
I did not find similar questions online (I am not sure what to search). Preferably, I need both PowerShell and Linux solutions. My only guess is somehow the react-scripts command should "trap" the shell Ctrl+C invocation, and self-exit safely, but I do not know how to do that unless react-scripts implements it on their own.
In PowerShell you can use a try{}finally{} construct to ensure the cleanup is run on interruption:
# <build preparation>
try {
npx react-scripts start
}
finally {
# <build cleanup>
}

Run two commands synchronously in a split terminal

I would like to launch my development server using a single launch script in a split console with ConEmu. It can be a ConEmu task, a batch script, or whatever it takes. I have achieved this with Gulp but find that solution to be overkill.
I need to execute
cd C:\Repo\myApp\frontEnd
npm start
I would then like to split the window cmd -new_console:s50H
And without waiting for npm start to finish, because it does not, execute the following in the new window. Syncronously so to speak.
cd C:\Repo\myApp\backEnd -new_console:s50H
node backEnd.js
Do you really care about executing npm start before creating new split with backend?
If you don't - the simplest way is starting backend before frontend. Actually, due to some minor delays in processing, your npm start may start same time or even before than node.
cd /d C:\Repo\myApp\frontEnd
node backEnd.js -new_console:s50H -new_console:d:"C:\Repo\myApp\backEnd"
npm start
Another option is starting npm in background and node thereafter.
cd /d C:\Repo\myApp\frontEnd
ConEmuC -async -c npm start
node backEnd.js -new_console:s50H -new_console:d:"C:\Repo\myApp\backEnd"

Running NodeJS server and Angular client server from a desktop shortcut

I have a NodeJS server that I run using npm startand an AngularJS client UI application that I also run using npm start, is there a way to create a desktop shortcut to run the command lines with just a click?
As mentioned in my comment, a batch script seems like the easiest way of doing this. If you're on Windows, this should do what you need:
start cmd /k "cd C:/yournodeproject && npm start"
start cmd /k "cd C:/yourangularproject && npm start"
start runs a command in a new window.
cmd /k allows us to pass a string into the new command line.
Each window switches to the relevant directory and runs npm start.
Unfortunately I don't know enough about Bash to offer a Linux equivalent, but hopefully this will get you started.

Resources