Create Simple POS With React, Node and MongoDB #4: Optimize App and Setup Deployment Workflow

 

Create Simple POS With React, Node and MongoDB #4: Optimize App and Setup Deployment Workflow

Create Simple POS With React, Node and MongoDB #4: Optimize App and Setup Deployment Workflow

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

Before we add more features to our POS app, we need to optimize and restructure the app for better performance and clarity. Also, we will introduce a deployment pipeline so that when we commit code changes to GitHub, the app is automatically deployed to Heroku and Netlify.

This is the list of the tasks we have to complete during this chapter.

  • [ ] separate backend and frontend
  • [ ] add environment variables to the backend
  • [ ] add environment variables to frontend
  • [ ] separate to individual route
  • [ ] setup auto-deployment of backend and frontend through Github

So, let’s get started.

[✔️ ] Separate backend and frontend

We will remove the backend folder from the backend folder and move it outside. We also need to uninstall and reinstall the node modules.

BASICPOS folders

BASICPOS folders

[✔️ ] Add an environment variable to the backend

We will install the dotenv package to easily maintain keys and prevent API keys from being exposed to the outside world.

Import the package to index.js.

Create a .env file in the root directory and add our API key to the file in a key-value structure.

Replace the keys we previously used in backend files using process.env.<key-name>.

[✔️ ] Add an environment variable to frontend

When using create react app, it is easier to maintain the environment variables. You can refer to the official document to see find out more details.

  1. Create .env file.
  2. Add a new variable to the .env file ( have prefix REACT_APP_ ). eg.REACT_APP_API_URL=http://localhost:8080/
  3. Replace the old static string.
    axios
    .post(process.env.REACT_APP_API_URL + "login", values)
  4. Restart the server.

[✔️ ] Separate routes

As our app expands and the number of routing endpoints increases, keeping all route access points in a single index.js file is not a good practice. Therefore, we reorganize our backend by moving all the routes to a new folder which has a main route access point. Then, we need to import these routes to the index.js file.

First, we will create a new api.js file and configure it as the main route access point.

The commented routes will be taken into use in the upcoming chapters.

Now, create a file named api_auth.js inside the route older and move all the routes that relate to authentication from index.js into this. Here, replace the occurrences of ‘app’ with ‘router’.

Import api.js to index.js.

[✔️ ] Separate repository

Creating a new repo

Creating a new repo

We need to create a new repository for the backend.

Pushing the locally changed code to GitHub.

Pushing the locally changed code to GitHub.

Push the locally changed code to GitHub.

[✔️ ] Deploy Node backend to Heroku

Deploy Node backend to Heroku

Deploy Node backend to Heroku

Setting up automatic deployment from Github

Setting up automatic deployment from Github

Heroku is one of the top cloud providers that provide a simple way to deploy apps using Nodejs backend. Before deploying to Heroku, we need to build the app. This can be achieved by setting up automatic deployment from Github so that the whole process takes just one click.

Set up auto-deploy from Github.

Set up auto-deploy from Github.

Set up auto-deploy from Github.

Select the auto-deploy option to the auto-deployment.

Select the auto-deploy option to the auto-deployment.

Select the auto-deploy option to the auto-deployment.

Setup env key in Heroku

Adding all the environment variable keys into Heroku setting

Adding all the environment variable keys into Heroku setting

We need to add all the environment variable keys into Heroku setting

We need to configure the app to use the Heroku port. Add the following code line to achieve this:process.env.PORT


Heroku auto-deploy activity in the Activity tab

Heroku auto-deploy activity in the Activity tab

Now, every time you push the code to GitHub you will see Heroku auto-deploy activity in the Activity tab.

Now try to open the app.

Open the app

Open the app

Viewing the app log to figure out the problem

Viewing the app log to figure out the problem

We are getting a not found error. In Heroku, if something goes wrong, you can view the app log to figure out the problem.

[✔️ ] Setup auto deployment from GitHub to Netlify

We can use Heroku to host the frontend. But we have another better option to use Netlify. Netlify is a dedicated service for static hosting.

Get the backend API url to be used in the frontend.

Get the backend API url to be used in the frontend.

Get the backend API url to be used in the frontend.

Creating a new site -1

Creating a new site -1

Creating a new site -2

Creating a new site -2

Deploy settings

Deploy settings

Getting started

Getting started

Here, you can see deploy activities.

Deploy activities

Deploy activities

Now we can open our live app hosted on Netlify.

Opening app on Netlify

Opening app on Netlify

You can see a demo of the application here.

Conclusion

In this chapter, we learned how to setup environment variables on Node and React. Then we learned how to use the express router to organize the backend structure. Finally, we learned how to set up auto-deployment from Github to Heroku and Netlify.

Git repos:

https://github.com/krissnawat/basicpos-backend

https://github.com/krissnawat/basicpos-frontend

Credit

Previous lessons:

Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp
Create simple POS with React, Node and MongoDB #2: Auth state, Logout, Update Profile
Create a simple POS with React, Node and MongoDB #1: Register and Login with JWT

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

In this chapter, we will continue from our previous chapters by discussing how to setup ReCaptcha and set up CORS. After publishing our backend and ...

Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp

This is the third chapter of our series of developing a POS with React, Node, and MongoDB. In this chapter, we are going to set up an email ...

Create simple POS with React, Node and MongoDB #2: Auth state, Logout, Update Profile

This is the second chapter of our series of creating a simple POS with React, Node, and ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy