Recently I have been working on multiple full stack web apps where I noticed that just starting the web app, requires good enough effort like changing the present working directory to backend/, running the command to start the server, going back to the root directory, again changing the current directory to frontend/ and finally running the last command to host the frontend. This was the time when I got the desire to automate this.

Currently, I am taking the course Bash Shell Scripting where I am learning a lot of scripting. However, the barrier was I used to think, that since I am on a Windows machine, I could not use Bash Shell Script to automate the task. Nonetheless, I was not aware that I could enjoy the benefit of Bash from Git bash.

When I came to know that I could write the script and use it from git bash, I made this script to automate the starting procedure.

#!/bin/bash

# Procedures to close the server.
closeServer() {
    echo "Close server"
    cd ..
    rm -rf Logs
    exit 0
}

# Call the function to start the procedure to close the server
trap closeServer SIGINT

if [ ! -d "Logs" ];
then mkdir Logs
fi

echo "The logs for both Frontend and Backend can be checked from Logs/ directory."

echo "Start backend server(Dev mode)"
# Change directory to the Backend directory
cd Backend || exit 1

# Run the backend server.
# '&' puts the job in the background
npm run dev >> ../Logs/backend.log 2>&1 &

# Change directory back to the parent directory
cd ..

# Change directory to the Frontend directory
cd Frontend || exit 1

echo "Start frontend server"

# Run the frontend server
npm start >> ../Logs/frontend.log 2>&1

Script Explanation

Basically, the script does the same procedure as I describe which I used to do to start the project, however on top of that, this script upon starting the server, moves the procedure to the background and I can still get all the logs printed in a separate file for both backend and frontend. Printing the logs in a file gives me the flexibility to go through the logs and perform search and other required operations on it. It is more comfortable to go through the logs in a file vs scrolling through the terminal. Secondly, since the processes are running in the background, it eliminates the unnecessary use of extra terminals for both frontend and backend.

Moreover, the script senses the ctrl + c signal. When the script receives this signal from the user, the script deletes the log directory automatically.

Lastly, once the script was ready, to execute the script, I had to use ./scripts/start.sh command, which I felt was too long. This is where I got curious and I experimented with creating a package.json file in the root of the project and adding a start script with the command.

{
  "scripts": {
    "start": "bash -c scripts/start.sh"
  }
}

I was not sure if it would work or not. But to my surprise, it did work. Hence now I just need npm start command to start the whole project vs what I used to do before.

The purpose of the blog is not to explain the way to automate the starting of a project, but it is to learn such scripting language to automate a lot of tasks which can save a lot of energy + time. The goal is to eliminate following the repeated procedures and normalize the use of such scripts in the projects.

If you are new to Bash Shell Scripting, you should learn more about it. I guess it can make your life a lot easier by eliminating a lots of daily tasks.

Here is a video brief video explanation about the same.

If you like my blogs, you may Buy me a coffee!