boost-ui

Front-end application for the Estafet Boost project build using React. More about requirements, technology stack and how to run in the sections bellow.

Requirements

• Node.js
• Package manager yarn or npm, but preferably yarn 📦

Use the package manager to install the dependencies.

yarn install
OR
npm install

Commands

• start - Start the applications in production mode
• start:dev - Start the applications in development (watch) mode
• build - Bundle the application into the build folder
• build:analyze - Build the project and analyze the bundle using a Webpack plugin
• test - Runs the unit test suite using Jest in match mode
• test:ci - Runs the unit test suite in CI mode (verbose flag set and watch mode disabled)
• lint - Runs the linter using ESLint and prints out errors and warnings
• postinstall - Used as a hook to build the application when deploying in OpenShift; This script is skipped by default; enabled in Openshift with POST_INSTALL=true

Some of the commands are prefixed with cross-env in order to support environment variables across different platforms.

Running locally

Prior to starting the project, please configure the mandatory environment variables listed here. Use the following command to start the project in development mode:

yarn start:dev
OR
npm run start:dev

The application will start at localhost:3000 for development and localhost:8080 for production. The port difference is caused by this issue in Razzle. You can change to a desired port by using the PORT environment variable.

Environment variables

Read more about environment variables here.

Technology stack

• razzle
• React
• Redux
• Redux-saga
• styled-components
• @loadable/server, @loadable/component

..and much more 🤫

GIT Workflow

Workflows are custom automated processes that you can set up in your repository to build, test, package, release, or deploy any project on GitHub. With workflows you can automate your software development life cycle with a wide range of tools and services.

The current workflow is implemented to run on master or pull request pushes in order to verify that the project can still build and that the tests are passing with the applied changes.

Read more about workflows

Testing

Testing is implemented by using Jest as a test runner, Enzyme for component testing and redux-saga-test-plan for saga testing. There is also a commit hook to run tests related to the applied changes.

Note: Using .silentRun() for the saga testing, because some of the sagas are using an infinite loop to achieve polling functionality

Linting and code formatting 🤨

Linting and code formatting is done by using ESLint and prettier. Git hooks are configured using husky🐕 and lint-staged in order to prevent bad coding practices by linting and pre-formatting the code on every commit.

Commit message linting

Commit message are linted and certain rules are enforced by using commitlint. This is used in order to enforce better messages and descriptions for changes made to the codebase.

To be implemented

Future improvements and notes here

To be extended in the future with more documentation on how the application is working