11 |
12 |
13 | [](#contributors-)
14 |
15 |
16 | > Boilerplate to create React.js apps with Vite
17 |
18 | ## Which techs this boilerplate have in it?
19 |
20 | This boilerplate is ready to be used by devs who want to start a new project using React.js, TypeScript and Jest with Vite.
21 |
22 | ## Main configurations
23 |
24 | - React.js 18+ with TypeScript;
25 | - You can import "svgs" with `import { ReactComponent as MyIcon } from './icon-path.svg'`;
26 | - You can import any other media (images, videos, etc) that is located inside `src` directory;
27 | - You can use absolute imports, using `@` as `src` directory;
28 | - Eslint:
29 | - [Standard](https://standardjs.com/) with some modifications;
30 | - React Hooks and other React configurations with [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app) (same used in Create React App);
31 | - Automatic lint and type-checking with Husky before every commit.
32 |
33 | ## Usage
34 |
35 | Install the dependencies:
36 |
37 | ```sh
38 | yarn install
39 | ```
40 |
41 | Run dev server:
42 |
43 | ```sh
44 | yarn dev
45 | ```
46 |
47 | You can run type-checking in watch mode in another terminal, if you may:
48 |
49 | ```sh
50 | yarn type-check --watch
51 | ```
52 |
53 | ## Run tests
54 |
55 | ```sh
56 | yarn test
57 | ```
58 |
59 | ## Production version
60 |
61 | To generate the production version, you can run:
62 |
63 | ```sh
64 | yarn build
65 | ```
66 |
67 | All files you have to deploy will be located at the `dist` directory.
68 |
69 | ### Run production version locally
70 |
71 | To check if everything will be ok in production before the deployment, you can run this command after `yarn build`:
72 |
73 | ```sh
74 | yarn preview
75 | ```
76 |
77 | ## Author
78 |
79 | 👤 **Fernando Daciuk**
80 |
81 | * Website: https://daciuk.dev
82 | * Twitter: [@fdaciuk](https://twitter.com/fdaciuk)
83 | * Github: [@fdaciuk](https://github.com/fdaciuk)
84 | * LinkedIn: [@fdaciuk](https://linkedin.com/in/fdaciuk)
85 | * Instagram : [@fdaciuk](https://instagram.com/fdaciuk)
86 |
87 | ## 🤝 Contributing
88 |
89 | Contributions, issues and feature requests are welcome! Feel free to check [issues page](https://github.com/fdaciuk/boilerplate-vite-react/issues).
90 |
91 | ## ✨ Contributors
92 |
93 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
94 |
95 |
96 |
97 |
98 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
115 |
116 | ## Show your support
117 |
118 | Give a ⭐️ if this project helped you!
119 |
120 | ***
121 | _This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
122 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * For a detailed explanation regarding each configuration property and type check, visit:
3 | * https://jestjs.io/docs/configuration
4 | */
5 |
6 | const assetsKey = '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$'
7 |
8 | const config = {
9 | // All imported modules in your tests should be mocked automatically
10 | // automock: false,
11 |
12 | // Stop running tests after `n` failures
13 | // bail: 0,
14 |
15 | // The directory where Jest should store its cached dependency information
16 | // cacheDirectory: "/tmp/jest_rs",
17 |
18 | // Automatically clear mock calls, instances and results before every test
19 | clearMocks: true,
20 |
21 | // Indicates whether the coverage information should be collected while executing the test
22 | collectCoverage: true,
23 |
24 | // An array of glob patterns indicating a set of files for which coverage information should be collected
25 | // collectCoverageFrom: undefined,
26 |
27 | // The directory where Jest should output its coverage files
28 | coverageDirectory: 'coverage',
29 |
30 | // An array of regexp pattern strings used to skip coverage collection
31 | coveragePathIgnorePatterns: [
32 | '/node_modules/',
33 | 'config/tests',
34 | ],
35 |
36 | // Indicates which provider should be used to instrument code for coverage
37 | // coverageProvider: "babel",
38 |
39 | // A list of reporter names that Jest uses when writing coverage reports
40 | // coverageReporters: [
41 | // "json",
42 | // "text",
43 | // "lcov",
44 | // "clover"
45 | // ],
46 |
47 | // An object that configures minimum threshold enforcement for coverage results
48 | // coverageThreshold: undefined,
49 |
50 | // A path to a custom dependency extractor
51 | // dependencyExtractor: undefined,
52 |
53 | // Make calling deprecated APIs throw helpful error messages
54 | // errorOnDeprecated: false,
55 |
56 | // Force coverage collection from ignored files using an array of glob patterns
57 | // forceCoverageMatch: [],
58 |
59 | // A path to a module which exports an async function that is triggered once before all test suites
60 | // globalSetup: undefined,
61 |
62 | // A path to a module which exports an async function that is triggered once after all test suites
63 | // globalTeardown: undefined,
64 |
65 | // A set of global variables that need to be available in all test environments
66 | // globals: {},
67 |
68 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
69 | // maxWorkers: "50%",
70 |
71 | // An array of directory names to be searched recursively up from the requiring module's location
72 | // moduleDirectories: [
73 | // "node_modules"
74 | // ],
75 |
76 | // An array of file extensions your modules use
77 | // moduleFileExtensions: [
78 | // "js",
79 | // "jsx",
80 | // "ts",
81 | // "tsx",
82 | // "json",
83 | // "node"
84 | // ],
85 |
86 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
87 | moduleNameMapper: {
88 | '@/(.*)': '/src/$1',
89 | '\\.svg$': '/src/config/tests/mocks/svg.ts',
90 | [assetsKey]: 'ts-jest',
91 | },
92 |
93 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
94 | // modulePathIgnorePatterns: [],
95 |
96 | // Activates notifications for test results
97 | // notify: false,
98 |
99 | // An enum that specifies notification mode. Requires { notify: true }
100 | // notifyMode: "failure-change",
101 |
102 | // A preset that is used as a base for Jest's configuration
103 | // preset: undefined,
104 |
105 | // Run tests from one or more projects
106 | // projects: undefined,
107 |
108 | // Use this configuration option to add custom reporters to Jest
109 | // reporters: undefined,
110 |
111 | // Automatically reset mock state before every test
112 | // resetMocks: false,
113 |
114 | // Reset the module registry before running each individual test
115 | // resetModules: false,
116 |
117 | // A path to a custom resolver
118 | // resolver: undefined,
119 |
120 | // Automatically restore mock state and implementation before every test
121 | // restoreMocks: false,
122 |
123 | // The root directory that Jest should scan for tests and modules within
124 | // rootDir: undefined,
125 |
126 | // A list of paths to directories that Jest should use to search for files in
127 | roots: [''],
128 |
129 | // Allows you to use a custom runner instead of Jest's default test runner
130 | // runner: 'jest-runner',
131 |
132 | // The paths to modules that run some code to configure or set up the testing environment before each test
133 | // setupFiles: [],
134 |
135 | // A list of paths to modules that run some code to configure or set up the testing framework before each test
136 | setupFilesAfterEnv: ['/jest.setup.ts'],
137 |
138 | // The number of seconds after which a test is considered as slow and reported as such in the results.
139 | // slowTestThreshold: 5,
140 |
141 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing
142 | // snapshotSerializers: [],
143 |
144 | // The test environment that will be used for testing
145 | testEnvironment: 'jsdom',
146 |
147 | // Options that will be passed to the testEnvironment
148 | // testEnvironmentOptions: {},
149 |
150 | // Adds a location field to test results
151 | // testLocationInResults: false,
152 |
153 | // The glob patterns Jest uses to detect test files
154 | // testMatch: [
155 | // "**/__tests__/**/*.[jt]s?(x)",
156 | // "**/?(*.)+(spec|test).[tj]s?(x)"
157 | // ],
158 |
159 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
160 | // testPathIgnorePatterns: [
161 | // "/node_modules/"
162 | // ],
163 |
164 | // The regexp pattern or array of patterns that Jest uses to detect test files
165 | // testRegex: [],
166 |
167 | // This option allows the use of a custom results processor
168 | // testResultsProcessor: undefined,
169 |
170 | // This option allows use of a custom test runner
171 | // testRunner: "jest-circus/runner",
172 |
173 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
174 | // testURL: "http://localhost",
175 |
176 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
177 | // timers: "real",
178 |
179 | // A map from regular expressions to paths to transformers
180 | transform: {
181 | '^.+\\.tsx?$': 'ts-jest',
182 | [assetsKey]: 'ts-jest',
183 | '\\.svg$': 'ts-jest',
184 | },
185 |
186 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
187 | // transformIgnorePatterns: [
188 | // "/node_modules/",
189 | // "\\.pnp\\.[^\\/]+$"
190 | // ],
191 |
192 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
193 | // unmockedModulePathPatterns: undefined,
194 |
195 | // Indicates whether each individual test should be reported during the run
196 | // verbose: undefined,
197 |
198 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
199 | // watchPathIgnorePatterns: [],
200 |
201 | // Whether to use watchman for file crawling
202 | // watchman: true,
203 | }
204 |
205 | export default config
206 |
--------------------------------------------------------------------------------
/jest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "boilerplate-react-vite",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "tsc && vite build",
8 | "preview": "vite preview",
9 | "test": "jest",
10 | "test:watch": "yarn test --watch",
11 | "lint": "eslint src --ext ts,tsx",
12 | "lint:fix": "yarn lint --fix",
13 | "type-check": "tsc --project tsconfig.json --pretty --noEmit",
14 | "prepare": "husky install",
15 | "update-deps": "node ./src/config/update-deps.mjs"
16 | },
17 | "dependencies": {
18 | "@testing-library/jest-dom": "5.16.5",
19 | "@testing-library/react": "13.4.0",
20 | "@types/jest": "29.0.3",
21 | "@types/react": "18.0.21",
22 | "@types/react-dom": "18.0.6",
23 | "@vitejs/plugin-react": "2.1.0",
24 | "babel-eslint": "10.1.0",
25 | "eslint": "8.24.0",
26 | "eslint-config-react-app": "7.0.1",
27 | "eslint-config-standard": "17.0.0",
28 | "eslint-config-standard-jsx": "11.0.0",
29 | "eslint-config-standard-react": "11.0.1",
30 | "eslint-plugin-import": "2.26.0",
31 | "eslint-plugin-n": "15.3.0",
32 | "eslint-plugin-promise": "6.0.1",
33 | "eslint-plugin-react": "7.31.8",
34 | "husky": "8.0.1",
35 | "jest": "29.1.1",
36 | "jest-runner-eslint": "1.1.0",
37 | "react": "18.2.0",
38 | "react-dom": "18.2.0",
39 | "react-test-renderer": "18.2.0",
40 | "ts-jest": "29.0.2",
41 | "ts-node": "10.9.1",
42 | "typescript": "4.8.4",
43 | "vite": "3.1.4",
44 | "vite-plugin-linter": "1.2.0",
45 | "vite-plugin-svgr": "2.2.1",
46 | "vite-tsconfig-paths": "3.5.1"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/@types/svg.d.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/facebook/create-react-app/blob/0ee4765c39f820e5f4820abf4bf2e47b3324da7f/packages/react-scripts/lib/react-app.d.ts#L47-L56
2 |
3 | declare module '*.svg' {
4 | import * as React from 'react'
5 |
6 | export const ReactComponent: React.FunctionComponent<
7 | React.SVGProps & { title?: string }
8 | >
9 | }
10 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
40 | button {
41 | font-size: calc(10px + 2vmin);
42 | }
43 |
--------------------------------------------------------------------------------
/src/app.spec.tsx:
--------------------------------------------------------------------------------
1 | import { App } from '@/app'
2 | import { render, screen } from '@testing-library/react'
3 |
4 | it('Test', () => {
5 | render()
6 |
7 | const button = screen.getByRole('button')
8 | expect(button).toBeEnabled()
9 | })
10 |
--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { ReactComponent as Logo } from './logo.svg'
3 | import './app.css'
4 |
5 | export function App () {
6 | const [count, setCount] = useState(0)
7 |
8 | return (
9 |
10 |
11 |
12 |
Hello Vite + React!
13 |
14 |
17 |
18 |
19 | Edit App.tsx and save to test HMR updates.
20 |
4 |
5 | 
6 |
7 |
8 | 
9 |
10 | 
