https://github.com/tisoap/next-template-app
Batteries included Next.js template with Chakra UI & Typescript
https://github.com/tisoap/next-template-app
chakra-ui chromatic eslint github-actions jest nextjs prettier react redux redux-toolkit storybook template testcafe testing-library typescript yarn
Last synced: about 2 months ago
JSON representation
Batteries included Next.js template with Chakra UI & Typescript
- Host: GitHub
- URL: https://github.com/tisoap/next-template-app
- Owner: tisoap
- License: mit
- Created: 2020-12-12T15:13:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-25T19:19:20.000Z (over 2 years ago)
- Last Synced: 2024-05-01T18:05:57.017Z (about 1 year ago)
- Topics: chakra-ui, chromatic, eslint, github-actions, jest, nextjs, prettier, react, redux, redux-toolkit, storybook, template, testcafe, testing-library, typescript, yarn
- Language: TypeScript
- Homepage: https://next-template-app.vercel.app/
- Size: 1.45 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Next Template App
---
This project was bootstrapped using [next-template-app](https://github.com/tisoap/next-template-app), a batteries included Next.js template with Chakra UI & Typescript made by [Tiso Alvarez Puccinelli](https://github.com/tisoap).
## Requirements
- [Git](https://git-scm.com/)
- [Node](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/lang/en/)
- [Firefox](https://www.mozilla.org/en-US/firefox/new/)
## Installation
Clone this project using Git. In a terminal, navigate to the cloned project's root folder, and run the following command:
```bash
yarn && yarn dev
```
Once ready, open [localhost:3000](http://localhost:3000) in you browser.
### Enabling GitHub Actions
Once you push your project to your own GitHub repo, you need to add some configurations so all the GitHub actions here work properly. If you don't want those, you can delete the `.github/workflows` folder.
For the [Code Quality](https://codeql.github.com/) analysis, [enable code scanning on your repository](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/setting-up-code-scanning-for-a-repository).
For [Chromatic](https://www.chromatic.com/), you need to create and account there, add your GitHub project, and add a `CHROMATIC_PROJECT_TOKEN` to your project secrets, [as instructed here](https://www.chromatic.com/docs/github-actions.html).
For [Vercel deploy](https://vercel.com) with E2E testing, you need to add `VERCEL_ORG_ID`, `VERCEL_PROJECT_ID` and `VERCEL_TOKEN` to your project secrets.
1. You can get both `VERCEL_ORG_ID`, `VERCEL_PROJECT_ID` by linking your project with your vercel account using the `vercel` CLI command, and checking the file created at `.vercel/project.json` in your project. [Further action instructions here](https://github.com/marketplace/actions/deploy-to-vercel-action#vercel-project).
2. The `VERCEL_TOKEN` one can be generated on your [Vercel token page](https://vercel.com/account/tokens), make sure to create a unique one.
## Commands
- `yarn build-storybook`: Creates a production build from the component library docs
- `yarn build`: Creates a production build from this project
- `yarn check-repo`: Runs type and spell checking, code linter and unit tests
- `yarn coverage`: Runs unit tests and opens a code coverage report on `http://127.0.0.1:8080/`
- `yarn dev`: Starts the project with hot reload at `http://localhost:3000`
- `yarn generate-theme-typings`: Generates TypeScript typings for your custom Chakra theme (runs automatically on post-install)
- `yarn lint`: Runs the code linter
- `yarn spellcheck`: Checks for spelling typos in code
- `yarn start`: Starts the project at `http://localhost:3000`, but you need to execute the `yarn build` command beforehand
- `yarn storybook`: Starts the component library docs with hot reload at `http://localhost:6006`
- `yarn test-e2e`: Runs all end to end tests using the locally installed Firefox browser, but you need to have started the project in another terminal for it to work
- `yarn test`: Runs all unit tests and code coverage report
- `yarn type-check`: Check validity of all types in the project
## Technologies
This template uses:
- [Next.js](https://nextjs.org/) framework
- [TypeScript](https://www.typescriptlang.org/) type checking
- [Chakra UI](https://chakra-ui.com/) as the default component library
- [Redux Toolkit](https://redux-toolkit.js.org/) for state management
- [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit tests
- [TestCafé](https://devexpress.github.io/testcafe/) for End-to-End tests
- [Chromatic](https://www.chromatic.com/) for visual regression testing
- [GitHub Actions](https://github.com/features/actions) and [Vercel](https://vercel.com/) for CI/CD pipelines
- [Storybook](https://storybook.js.org/) for component documentation
- [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for code style standardization
- [Yarn](https://yarnpkg.com/) for managing project dependencies
- [CSpell](https://cspell.org/) for code spell checking
### Support
Liked this project and want to show your support? Buy me a coffee:
[](https://ko-fi.com/J3J472RAJ)