Writing custom scripts to run web applications

Automating Full Stack applications with npm

We are running our client and server in separate terminals. This is can be done together in a single terminal.

We create a package.json in our root folder that contains both client and server.

npm -y init

We don't need a node_modules in our root folder to run both client and server simultaneously. Simply go to the scripts section of the package.json and make custom commands to run server and client separately.

1. We will first go to the server directory and there we will run the dev script

2. Similarly we will go to the client directory and run the start script provided by the react app.

"scripts": {
    "server" : "cd server && npm run dev",
    "client": "cd client && npm start",

This is quite lengthy and can be done in shorthand using the * --prefix keyword

--prefix specifies to go to a specific folder named after it. This is how we do it

"server" : "npm run dev --prefix server",
    "client": "npm start --prefix client",

The script will do the same thing as --prefix tells the terminal to go to the server and client folder.

The " && " allows joining of two scripts and the second script runs after completion of first script.

Run both client and server simultaneously

Create a custom script named 'watch'

 "watch" : "npm run server && npm run client",

This should run? No! The second command will run when first command is finished executing. The server never stops running so our second script will never be executed.

To fix this use ' & ' instead of ' && ' and both the scripts will run together.

 "watch" : "npm run server & npm run client",

There are other functionalities as well now that we can do using the above techniques.

"scripts": {
    "install-server": "npm install --prefix server",
    "install-client": "npm install --prefix client",
    "install": "npm run install-server && npm run install-client",
    "server" : "npm run dev --prefix server",
    "client": "npm start --prefix client",
    "watch" : "npm run server & npm run client",

  }

The install script does not need to run both commands at the same time so we can use && .

install script will do any installation we need to do for server and then it will do the same for client.

Run install script like this

npm install

Running our project in production

We get a production ready optimized code on running build script in our react app.

We want to server our files from server only, to do that we change the build script from

"build": "react-scripts build",

to

"build": "set BUILD_PATH=../server/public&& react-scripts build",

Before knowing functions, make sure there is not space between 'public' and '&&' else windows will save the folder as 'public ' instead of 'public' and our front end will never load.

set BUILD_PATH is pointing to the public folder inside the server folder, on running the build script now the server folder will have a public folder.

In case there is Plugin "react" was conflicted between "package.json » ....xxxx comes make sure the path in powershell is same as in windows explorer ie. the path should be exactly same characters as shown in windows.

Now we will use the express.static() to host our build folder from our server end only.

This code will be added inside the app.js

app.use(express.static(path.join(__dirname, '..', 'public')));

On running our server only we will see the frontend being available on port 8000.

Since our application is serving the public folder we need to handle the case where we get '/' endpoint request as well.

app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname, '..', 'public', 'index.html'))
})

This ensures our landing page is correctly displayed on visiting localhost:8000/