A robust web application template.
Architecture -> Design System -> Linting -> Testing -> Deployment
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 ofReact
, since this repository purpose should be solely for web. The latter is being used only in development/locally.
styled-components
: for styling concerns.
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.
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.
The tool of choice for providing the design system development is Storybook.js.
- 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.
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.
The main solutions used here for testing are:
Jest
: as the standard testing framework;Test Renderer
, for controllingReact
components' rendering in tests.
test
: Run testing battery once, with fixing code style when is applicable; andtest:watch
: Keep running the test battery whenever occurs a modification on a.ts
/.tsx
file.
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
; andpre-push
:yarn test
.
The current commands and configurations are the following:
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.
dev
: Builds and serves an interactive and reloadable application instance, which can be used for local development purposes.
The build is being currently deployed in Vercel
just for presentation purposes. The configurations used for running the deployment are:
- Build command:
yarn next start && yarn next export
; and - Output folder:
out/
.
ui
: Builds and serves an interactive and reloadable Storybook instance mapping the currentstories.tsx
files in repository.ui:build
: Builds a product's static deployment, according to the its premises.