Continuing from Part 3 of the Front End series, part 4 will cover User Management, Firebase Hosting and Automation Test (AUT) with Puppeteer.

User Management and Firebase Hosting

Previously, we just provided some fundamental steps for setting up a development environment, for example, how to install and implement a project or how to use Unit Test (UT) and code coverage. In part 4, we will give you further information about Integration testing that is directly related to Dev.

Integration testing is commonly considered as the testing in Staging environment. It is a level of software testing where individual units are combined and tested as a group. The purpose of this level of testing is to expose faults in the interaction between integrated units.

As Integration testing is similar to the real environment, you need to Build and Deploy your application to fit into the Product environment. However, these tasks are the jobs of CI/CD team, not of Dev team, beacause they require specific knowledge that is beyond the scope of Developers, such as network, security, server operation or monitoring.

Here are two best free environments for developers.

  • Back-End environment: If you want a server without charge, you can access the website You can also access Heroku’s Free Tier at: It should be noted that if you don’t make any request to your server after 30 minutes, the server will be put on the suspended state.
  • Front-End environment for SPA: you can access the website Firebase Hosting with no charge to have a server. Find out its Free Tier at: Unlike Heroku, Firebase’s server is not suspended, but Firebase Hosting can solely deploy static web, instead of such Back-End codes as NodeJS or Java.
  • Database: You can use Firebase, its Free Tier is good and suitable for developers.

Deploy apps to Heroku

In this video, we will create a new NodeJS project with Express and deploy to Heroku:

Deploy apps to Firebase Hosting

Build and deploy sample source code to Firebase Hosting.

Before you watch the tutorial and give it a try, you should:

  • Create a google account
  • Download the sample source code.

Watch details in this video:

Hopefully, after the tutorial, you can understand how to operate and deploy projects on server.

Automation Test (AUT) with Puppeteer

AUT is the process of testing your application on the Integration environment automatically. We will run AUT with pre-defined data and test cases, then check and compare the outcome with pre-defined data.

AUT in different projects will have different implementation strategies. Even though it takes much time, compared to UT, AUT is especially beneficial for big projects with a large number of participants.

To better understand, let’s take a look at the following example:

  • Your project has about 50 developers and 2,000 test cases.
    The question is how to ensure the code of a Dev in the project’s repository does not adversely affect 2,000 test cases and the work of 49 Devs in the team.
  • In my experience, when a Dev pushed the code to the repository, the CI / CD team would Build and Deploy an Integration environment that syncs with the new code, then they run AUTs for smoke, sanity and regression tests to make sure the new code is appropriate for the project.
  • Similar to UT, in order to implement AUT, you have to create a new code to test your own products.

Currently, there are many tools assisting in AUT implement, such as Selenium Framework, Robot Framework or Puppeteer Library. As each tool has its own advantages and disadvantages, we need to consider different factors when choosing a suitable set for your project.

  • User community and developer community: these factors are quite important for Open source, as they assess the benefit, drawback and the ability to fix bugs of that Open source.
  • Document: The document needs to be sufficient, because in the development process, you need to refer to the relevant documents to solve problems in your project.
  • Features: A framework requires such features as test suites creating, tests running, reporting or system integration.
  • Programming language: Your team need to be well-prepared for the language.
  • Requirements on working environment: You need to be informed of your framework. Let’s ask yourself: What are needed to operate the framework? Is configuration simple or complex? And other hardware requirements, etc.
  • Browser: Does the framework support your browsers?
  • OS: Which operating systems the framework works on?
  • Implementation time: Is the framework running test cases and test suites fast?

Take Puppeteer as an example to implement AUT.

Install and test AUT

AUT has 3 test cases:

  • Create a new user: User 1.
  • Delete the first User.
  • Edit the first User name to User 1.

When you run this AUT, you will see the application turn on the browser at to perform the test. You can replace it with the address you deployed.

The result of AUT test will be:


We hope that you can garner useful knowledge from this series, especially knowledge about product development, concepts and stages to implement big projects.

Besides, you can search for “Fullstack Roadmap 2020” or “Front End Roadmap 2020” on Google to learn more about the technologies you need to have to succeed in your career.

Tran Huu Lap – FPT Software

Related posts: