https://github.com/abhishekbhardwaj/chakraui-react-next.js-typescript-eslint-jest-starter

Starter template for building a project using React, Typescript, Next.js, Jest, ChakraUI and ESLint.
https://github.com/abhishekbhardwaj/chakraui-react-next.js-typescript-eslint-jest-starter

chakraui eslint jest nextjs nextjs-starter react react-testing-library reactjs reactjs-boilerplate starter-template typescript

Last synced: 4 days ago
JSON representation

Starter template for building a project using React, Typescript, Next.js, Jest, ChakraUI and ESLint.

• Host: GitHub
• URL: https://github.com/abhishekbhardwaj/chakraui-react-next.js-typescript-eslint-jest-starter
• Owner: abhishekbhardwaj
• License: mit
• Created: 2020-11-28T12:42:50.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-03T00:14:27.000Z (over 1 year ago)
• Last Synced: 2024-10-23T10:34:55.831Z (13 days ago)
• Topics: chakraui, eslint, jest, nextjs, nextjs-starter, react, react-testing-library, reactjs, reactjs-boilerplate, starter-template, typescript
• Language: TypeScript
• Homepage:
• Size: 2.32 MB
• Stars: 87
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chakraui-react-next.js-typescript-eslint-jest-starter

Starter template for building a project using React, Typescript, Next.js, Jest, ChakraUI and ESLint.

## Setup Instructions

1. Clone or download the project.

2. `cd` in the project directory.

3. If you cloned the project, make sure you remove the remote reference to this project by running `git remote rm origin`.

4. Copy `.env.example` to `.env` as that file is used to load up all your environment variables.

4. Run `yarn install` or `npm install` to install all dependencies.

## Commands

- `yarn dev`: To start a local development server.

- `yarn test`: To run the entire unit test suite using `jest`.

- `yarn test:ci`: To run tests on CI.

- `yarn lint`: To run the ESLint based linter to find out the issues in the project.

- `yarn lint:fix`: To autoformat all the issues.

- `yarn export`: Run this after running `yarn analyze` to export a build copy.

- `yarn production`: To export a production build. Use `yarn start` to serve that.

- `yarn upgrade --latest`: To upgrade all packages to their latest versions (could include breaking changes).

## Code Structure

All source code is located in the `src/` directory:

1. All Next.js entrypoints are housed in the `src/pages` directory as a default.

    - Currently has `_app.tsx` which bootstraps ChakraUI within this project.

    - There's also a sample `index.tsx`.

    **NOTE**: Feel free to move `pages` outside of `src/` if that's what you prefer. You'll just need to restart your local development server and everything should continue working as normal.

2. `src/components` are all stateless reusable components.

    - Includes a dummy `MainHeading` component with a JEST test as a sample. Feel free to delete this.

3. `src/styles` folder is there just to house any styling.

    - It currently contains the ChakraUI theme ready for you to extend. This file has already been imported in `_app.tsx` and is already supplied as a prop to `ChakraProvider`.

4. All env variables are available in `.env` files (`.env` file isn't committed). Whenever you update `.env`, please update `.env.example` and `.env.test` and `next.config.js` to proxy all environment variables properly.

    - You can access these variables in the app source code anywhere using `process.env.`.

If you feel like changing the directory structure, please change the appropriate settings in the following files:

- `jest.config.js`

- `tsconfig.json`

- The `lint` and the `lint:fix` scripts in `package.json`