hanashiro / react-repositories

React Repositories

Summary

• React Repositories
  • Summary
  • Getting Started
  • Development
    • Files Creation
    • Components Development
    • Docker
  • Tests
  • Build

Getting Started

First, install the dependencies with npm or yarn:

npm install
# or
yarn install

While it is installing, you can create a .env.local file with a Personal Access Token in GitHub. This token is used to make requests to the GitHub API.

An example of the .env.local file is present on the .env.local.example file. You can copy it and rename it to .env.local.

Then run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Development

Files Creation

To create new files, run the following command:

npm run plop

Plop.js will create the necessary files with the ready and standardized structures for you to start coding. DON'T create files manually!

Components Development

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

Start Storybook with the following command:

npm run storybook

Open http://localhost:6006 with your browser to see the result.

Docker

You can use Docker if you want.

First, build the image:

    docker-compose build

Install the dependencies:

    docker-compose run --rm dev yarn install

Then, start the development server:

    docker-compose up dev

To start Storybook

    docker-compose up storybook

If you want to execute other NPM scripts, you can use this:

    docker-compose run --rm dev [script name]

Ex:

    docker-compose run --rm dev plop

Tests

Start tests with Jest with the following command:

npm test
# or
yarn test

To see the Test Coverage, run the following command:

npm run test:coverage
# or
yarn run test:coverage

(soon) For e2e tests, run the following command:

npm run cypress:open
# or
yarn run cypress:open

Build

Run the following command to build your application.

npm build
# or
yarn build