dhsrocha / template-js

A robust web application template.

Template JS

A robust web application template.

Architecture    ->    Design System    ->    Linting    ->    Testing    ->    Deployment

Architecture

Main dependencies

The solution relies on the following technologies:

• Typescript: as the base language used for this repository;
• Next.js:
  • Supplied by its template creation command, based on the aforementioned technologies.
  • Preact is being used in deployment instead of React, since this repository purpose should be solely for web. The latter is being used only in development/locally.
• styled-components: for styling concerns.

Premises

• React is considered a UMD resource in this solution's scope. Therefore, even in technologies not supported by directly by Next.js, the importing is implicit and can be omitted from the source-code.

File naming convention

The following depicts the conventions used for concern, as described in package.json's configurations for testing frameworks:

PS: All the files matched by the following extensions should be in a folder under the src.

• .ts / .tsx: Production files;
• The current configuration does not distinguish which folder the files of the following types might be in:
  • <Component>.test.ts: Test files with the corresponding Component name. This is mandatory due to @storybook/addon-jest file scanning for test cases.
  • stories.tsx: Stories files.

Design System

The tool of choice for providing the design system development is Storybook.js.

Features

• Typescript support as in any other files throughtout the project;
• It comes along with various addons' configurations. The scripts to configure its workings, as its documentation stands, can be checked for details.

Linting

The following solutions are used to enforce code consistence and best practices. They are integrated to Jest as plugins and extensions and, therefore, its declared rules are able to trigger along side in the CLI call.

• ESLint: syntax linting; and
• Prettier: style and format.

Testing

The main solutions used here for testing are:

• Jest: as the standard testing framework;
  • Also the necessary presets (such as ts-jest and Babel assets) in order to support .ts / .tsx files parsing.
• Test Renderer, for controlling React components' rendering in tests.

Commands

• test: Run testing battery once, with fixing code style when is applicable; and
• test:watch: Keep running the test battery whenever occurs a modification on a .ts/.tsx file.

Git hooks

In order to ensure sending only robust code to SCM, the solution Husky is going to trigger the following script command when the corresponding event occurs:

• pre-commit: yarn test -o; and
• pre-push: yarn test.

Deployment

The current commands and configurations are the following:

Locally

Next.js is provided for for building the application, which may be used locally (or any other desired environment). As of any framework, is should be run under its corresponding premises.

Commands

• dev: Builds and serves an interactive and reloadable application instance, which can be used for local development purposes.

Production

The build is being currently deployed in Vercel just for presentation purposes. The configurations used for running the deployment are:

Configuration

• Build command: yarn next start && yarn next export; and
• Output folder: out/.

Commands

• ui: Builds and serves an interactive and reloadable Storybook instance mapping the current stories.tsx files in repository.
• ui:build: Builds a product's static deployment, according to the its premises.