Skip to content

Commit cfb63d8

Browse files
romankohoromankoho
authored
Initial commit
0 parents  commit cfb63d8

29 files changed

+35371
-0
lines changed

‎.editorconfig

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
max_line_length = 100
7+
indent_style = tab

‎.github/workflows/lint.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: lint
2+
3+
on: push
4+
5+
jobs:
6+
lint:
7+
runs-on: ubuntu-latest
8+
9+
steps:
10+
- uses: actions/checkout@v3
11+
12+
- uses: actions/setup-node@v3
13+
with:
14+
node-version: 16
15+
cache: 'npm'
16+
17+
- name: Install Dependencies
18+
run: npm install
19+
20+
- name: Lint
21+
run: npm run lint

‎.github/workflows/tests.yml

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: tests
2+
3+
on: push
4+
5+
jobs:
6+
unit:
7+
runs-on: ubuntu-latest
8+
9+
steps:
10+
- uses: actions/checkout@v3
11+
12+
- uses: actions/setup-node@v3
13+
with:
14+
node-version: 16
15+
cache: 'npm'
16+
17+
- name: Install Dependencies
18+
run: npm install
19+
20+
- name: Test
21+
run: npx jest --config=jest.config.js
22+
e2e:
23+
runs-on: ubuntu-latest
24+
25+
steps:
26+
- uses: actions/checkout@v3
27+
28+
- uses: actions/setup-node@v3
29+
with:
30+
node-version: 16
31+
cache: 'npm'
32+
33+
- name: Install Dependencies
34+
run: npm install
35+
36+
- name: Cypress run
37+
uses: cypress-io/github-action@v4
38+
with:
39+
build: npm run build
40+
start: npm run start
41+
wait-on: "http://localhost:3000"

‎.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Dependency directories
2+
node_modules/
3+
4+
# Optional npm cache directory
5+
.npm
6+
7+
# dotenv environment variables file
8+
.env
9+
.env.test
10+
11+
# Build output
12+
dist

‎.stylelintrc.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"overrides": [
3+
{
4+
"files": ["**/*.scss"],
5+
"customSyntax": "postcss-scss"
6+
}
7+
],
8+
"extends": ["stylelint-config-standard-scss", "stylelint-config-rational-order"],
9+
"rules": {
10+
"scss/dollar-variable-pattern": null,
11+
"scss/dollar-variable-empty-line-before": null,
12+
"selector-id-pattern": null,
13+
"selector-class-pattern": null
14+
}
15+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Codely Enseña y Entretiene SL
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Makefile

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.PHONY: build
2+
build: deps compile
3+
4+
.PHONY: deps
5+
deps:
6+
npm install
7+
8+
.PHONY: compile
9+
compile:
10+
npm run build
11+
12+
.PHONY: start
13+
start:
14+
npm start
15+
16+
.PHONY: test
17+
test:
18+
npm test
19+
20+
.PHONY: lint
21+
lint:
22+
npm run lint
23+
24+
.PHONY: lint-fix
25+
lint-fix:
26+
npm run lint:fix

‎README.md

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<p align="center">
2+
<a href="https://codely.com">
3+
<img src="https://user-images.githubusercontent.com/10558907/170513882-a09eee57-7765-4ca4-b2dd-3c2e061fdad0.png" width="300px" height="92px" alt="Codely logo"/>
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
<⚡⚛️> Vite React Best Practices Template (by Codely)
9+
</h1>
10+
11+
<p align="center">
12+
<a href="https://github.com/CodelyTV/vite-react_best_practices-template/actions/workflows/tests.yml"><img src="https://github.com/CodelyTV/vite-react_best_practices-template/actions/workflows/tests.yml/badge.svg" alt="Build status"/></a>
13+
<a href="https://github.com/CodelyTV"><img src="https://img.shields.io/badge/CodelyTV-OS-green.svg?style=flat-square" alt="Codely Open Source"/></a>
14+
<a href="https://pro.codely.com"><img src="https://img.shields.io/badge/CodelyTV-PRO-black.svg?style=flat-square" alt="Codely Pro Courses"/></a>
15+
</p>
16+
17+
<p align="center">
18+
Template for creating React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.
19+
<br />
20+
<br />
21+
<a href="https://github.com/CodelyTV/vite-react_best_practices-template/stargazers">Stars are welcome 😊</a>
22+
</p>
23+
24+
## ⚡ Using this Vite template
25+
26+
1. Create your project based on this template:
27+
- a) If you want to create a GitHub repository, we would recommend to use the GitHub "Use this template" button and clone your newly created repository
28+
- b) If you prefer to just create a local project, you can use [degit](https://github.com/Rich-Harris/degit):
29+
```bash
30+
npx degit CodelyTV/vite-react_best_practices-template#main my-app
31+
```
32+
2. Update your project meta-information:
33+
- [ ] Update the [`package.json`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/package.json):
34+
- [ ] Specify proper values for the `name`, `author` and `license` properties
35+
- [ ] Remove the `private` property if you plan to publish the app as a npm package
36+
- [ ] Change the author in [`LICENSE`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/LICENSE)
37+
- [ ] Change the title in [`index.html`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/index.html)
38+
- [ ] Replace the favicon in the [`public`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/public) directory
39+
- [ ] Clean up this [`README.md`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/README.md)
40+
3. Run your app:
41+
1. `cd my-app`: Move to your project root directory
42+
2. `npm install`: Install all the project dependencies
43+
3. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)
44+
45+
## ✅ Testing
46+
47+
### Unit tests
48+
49+
`npm run test`: Run unit tests with Jest and React Testing Library
50+
51+
### End-to-end tests
52+
53+
1. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)
54+
2. Run end-to-end tests with Cypress choosing one of the following options:
55+
- `npm run cy:open`: Open Cypress in dev mode
56+
- `npm run cy:run`: Execute Cypress in CLI
57+
58+
## 🔦 Linting
59+
60+
- `npm run lint`: Run linter
61+
- `npm run lint:fix`: Fix lint issues
62+
63+
## 🌈 Tech Stack
64+
65+
- [TypeScript](https://www.typescriptlang.org)
66+
- [ESLint](https://eslint.org) and [Prettier](https://prettier.io) already configured with the [🤏 Codely's configuration](https://github.com/CodelyTV/eslint-config-codely)
67+
- [Jest](https://jestjs.io) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for the unit tests
68+
- [Cypress](https://www.cypress.io) with [Testing Library](https://testing-library.com/docs/cypress-testing-library) for the end-to-end tests
69+
- [GitHub Action Workflows](https://github.com/features/actions) set up to run tests and linting on push
70+
- [Makefile](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/Makefile) for standardize how to run projects
71+
- [Sass](https://sass-lang.com) to supercharge CSS with nested classes and more fun
72+
- [.editorconfig](https://editorconfig.org) for sharing the IDE config
73+
74+
## 🤔 FAQ
75+
76+
### 🤷‍♂️ Why Vite and not Next.js, Remix, or Create React App
77+
78+
React updated the official recommendation about how to start a new project. Previously, they recommended Create React App (CRA) and we did [this very same template based on CRA](https://github.com/CodelyTV/cra-template-codely), and right now they recommend to directly use a framework like Next.js, Remix, or Gatsby.
79+
80+
However, they also include an specific section in the official documentation on how to use React without a framework, and the recommended way is to use Vite or Parcel.
81+
82+
Even if not using a framework such as Next.js is something to double check, we are interested into having this template for use cases where you are not interested into the benefits of a complete framework. For instance, theses cases could be as simple as learning the React.js features and limitations in order to have a clear vision where React ends and a framework starts. This is something we do in [our React video course](https://pro.codely.com/library/react-de-0-aplicando-buenas-practicas-192069/460310/about/).
83+
84+
### 👻 Why not adding `.vscode` or `.idea` to the `.gitignore` template
85+
86+
These are folders created due to personal environment preferences. We should ignore these personal development environment preferences to be ignored using your global `.gitignore` file and leave the project `.gitignore` file as clean as possible, that is, only containing the project specific rules.
87+
88+
You can create a `.gitignore_global` file with rules that will apply to all your repositories with:
89+
90+
```bash
91+
touch ~/.gitignore_global
92+
git config --global core.excludesfile ~/.gitignore_global
93+
```
94+
95+
## 👌 Codely Code Quality Standards
96+
97+
Publishing this package we are committing ourselves to the following code quality standards:
98+
99+
- 🤝 Respect **Semantic Versioning**: No breaking changes in patch or minor versions
100+
- 🤏 No surprises in transitive dependencies: Use the **bare minimum dependencies** needed to meet the purpose
101+
- 🎯 **One specific purpose** to meet without having to carry a bunch of unnecessary other utilities
102+
- ✅ **Tests** as documentation and usage examples
103+
- 📖 **Well documented ReadMe** showing how to install and use
104+
- ⚖️ **License favoring Open Source** and collaboration
105+
106+
## 🔀 Related information
107+
108+
This application was generated using the [<⚡⚛️> Vite React Best Practices Template](https://github.com/CodelyTV/vite-react_best_practices-template). Feel free to check it out and star the repo! 🌟😊🙌

‎cypress.config.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineConfig } from "cypress";
2+
3+
export default defineConfig({
4+
video: false,
5+
e2e: {
6+
baseUrl: "http://localhost:3000",
7+
specPattern: "tests/e2e/tests/**/*.spec.{js,jsx,ts,tsx}",
8+
screenshotOnRunFailure: false,
9+
video: false,
10+
viewportWidth: 1920,
11+
viewportHeight: 1080,
12+
supportFile: "tests/e2e/support/e2e.ts",
13+
},
14+
});

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title><⚡⚛️> Vite React Best Practices Template (by Codely)</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root"></div>
13+
14+
<script type="module" src="/src/index.tsx"></script>
15+
</body>
16+
</html>

‎jest.config.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = {
2+
testEnvironment: "jsdom",
3+
setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
4+
testMatch: ["<rootDir>/tests/**/*.(spec).(ts|tsx)"],
5+
testPathIgnorePatterns: ["<rootDir>/tests/e2e/"],
6+
transform: {
7+
"^.+\\.(js|jsx|ts|tsx)$": [
8+
"@swc/jest",
9+
{
10+
sourceMaps: true,
11+
jsc: {
12+
parser: {
13+
syntax: "typescript",
14+
tsx: true,
15+
},
16+
transform: {
17+
react: {
18+
runtime: "automatic",
19+
},
20+
},
21+
},
22+
},
23+
],
24+
},
25+
moduleNameMapper: {
26+
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
27+
"\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
28+
"jest-transform-stub",
29+
},
30+
};

0 commit comments

Comments
 (0)