Build dashboard application with React, Redux and Reactstrap

This article is part of an aggregating article describing Serverless React/Gatsby/Go template

Build a web-site using this template

Single-page application (SPA) is a web application or website that renders its content dynamically in browser, rewriting the current web page with data from the web server, instead of the orthodoxal method of the browser loading entire new pages.

Well-designed single-page applications can be much faster than usual web applications with smoother transitions between states.

A big disadvantage of single-page applications is that search engines are doing really bad job indexing them (read, they don’t index such applications)

Even though Google has announced few years ago that it’s going to index such applications, on practice it either doesn’t index them, or the algorithm is not reliable.

Dashboard application contains user data and is protected by authentication. This is why we don’t worry much about its indexing.

And thus it makes a lot of sense to build the dashboard application as a single-page application.

Now, we have a choice between the top level technology to use: React vs Angular.

The industry tends to use ReactJs more than AngularJs. But we will not consider this choice here and will leave it to the reader.

The discussed template uses React Javascript library as a foundation.

Redux vs Flux

Initially, there were few design patters for UI application development. One of the most popular amoung them was MVC (Model View Controller). This patterns devides application into three components:

• Model maintaining the data and state of the application
• View translating the model into a UI
• Controller serving as an interface between View and Model

Facebook team rethought this pattern and came up with Flux architecture. Flux consists of the following components:

• Store which is used as a container for the app data and state
• Action enabling data passing to the dispatcher
• View translating the Store into a UI
• Dispatcher to co-ordinate actions & updates to stores

Redux is a library, that can be considered as a simplification of Flux. It implements the idea of Flux but in a different way. Redux architecture introduces the following components:

• Reducer specifying how the application’s state changes in response to actions sent to the store. In other words, actions only describe what happened, but don’t describe how the application’s state changes
• Centralized store holds a state object that conveys the state of the entire app

In the discussed template we are using Redux for its simplicity.

Integration Points

The Dashboard application has two integration points:

1. Authentication API for users authentication
2. Backend API for user data manipulation

When user registers a new account, the authentication logic sends a verification e-mail to the user. Thus, the authentication flow consists of 4 screens:

1. Log in
2. Registration
3. Verification
4. Restore password

Server implementation of the authentication flow is described in the aggregating article.

Authentication API provides the dashboard an authentication token, which dashboard stores in a local storage and then uses in requests to the backend service.

We host the backend service under a different domain, and thus it’s important that the service a) Can process the OPTIONS request b) Returns correct CORS headers

We discuss CORS options in more details in Golang API on AWS Lambda with Cognito authentication

The dashboard application in this template has a Beers page demonstrating integration of the dashboard with the backend serverless API.

UI elements

The dashboard is built using the Reactstrap library, allowing easy usage of React Bootstrap 4 components. The dashboard has multiple pages demonstrating various UI components that can be used in your solution.

Development

You can run the dashboard application locally on your computer simply by running

yarn dev

When you run the application locally, all requests to the backend will be made via a CORS proxy, because the API server is set up to allow Cross Origin requests only from the web site that you specified while creating the project.

CORS proxy makes sure that all backend requests will still work smootly in your development environment.

CI/CD

When a new code is checked in, it will be caught by the CI/CD automation and immediately deployed to production by the code pipeline.

We use AWS CodeBuild and CodePipeline to monitor the repository and trigger the deployment process each time when a new change is pushed to the repository.

However, the deployment flow does not invalidate the CloudFront cache, and thus new changes will not be live immediately.

If you want to see the changes right away, you will need to invalidate the CloudFront cache manually or build in the invalidation into the build process.