├── .env.example ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .husky ├── pre-commit └── pre-push ├── .lintstagedrc.json ├── .prettierignore ├── .prettierrc.json ├── .stylelintignore ├── .stylelintrc.json ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── app │ ├── App.jsx │ ├── App.module.css │ ├── components │ │ ├── Button │ │ │ ├── Button.jsx │ │ │ └── Button.module.css │ │ └── Welcome │ │ │ ├── Welcome.jsx │ │ │ └── Welcome.module.css │ ├── favicon.svg │ ├── globals.css │ ├── logo.svg │ └── main.jsx ├── lib │ └── router.js └── server.js └── vite.config.js /.env.example: -------------------------------------------------------------------------------- 1 | PORT=3001 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .eslintcache -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": ["eslint:recommended", "prettier", "plugin:react/recommended"], 8 | "parser": "babel-eslint", 9 | "parserOptions": { 10 | "ecmaVersion": 12, 11 | "sourceType": "module" 12 | }, 13 | "plugins": ["react-hooks"], 14 | "rules": {}, 15 | "settings": { 16 | "react": { 17 | "version": "17.0" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .eslintcache -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged --config .lintstagedrc.json 5 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm test 5 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,jsx,ts,tsx}": "eslint --fix --cache", 3 | "*.css": "stylelint --fix", 4 | "*.{js,jsx,ts,tsx,css,html,json,md,mdx}": "prettier --write" 5 | } 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .eslintcache -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .eslintcache -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard", "stylelint-config-prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Leon Machens 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite React Express Boilerplate 2 | 3 | > Quickly bootstrap a new project with Vite React Express Boilerplate. 4 | 5 | This boilerplate is a fork of [lmachens/vite-boilerplate](https://github.com/lmachens/vite-boilerplate), but replaces TypeScript with JavaScript and removes Storybook. 6 | 7 | This boilerplate contains all the tools you need to build a modern web app with JavaScript, React, Vite, and Express. 8 | You can use it to quickly bootstrap your project. 9 | 10 | ESLint, stylelint, prettier, husky and lintstaged are configured to give you a solid development experience. 11 | 12 | ## Installing / Developing 13 | 14 | First, [create a repository from this template](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/creating-a-repository-from-a-template). 15 | 16 | Now you are ready to go: 17 | 18 | ```shell 19 | npm install 20 | ``` 21 | 22 | This will install the dependencies required to run the boilerplate. 23 | 24 | ```shell 25 | npm run dev 26 | ``` 27 | 28 | Boom! These scripts run your server and client in development mode. 29 | 30 | The default PORTS are: 31 | 32 | - `3001` for the server 33 | - `3000` for the client 34 | 35 | If you don't like to call all scripts at once, you can also run: 36 | 37 | ```shell 38 | npm run server:dev 39 | npm run client:dev 40 | ``` 41 | 42 | You can configure the server port by setting the `PORT` environment variable. Creating a `.env` file is supported. You can copy `.env.example` to `.env`. 43 | 44 | | KEY | VALUE | 45 | | ---- | ------------------------------------------------------------- | 46 | | PORT | (Optional) Port for the server environment (defaults to 3001) | 47 | 48 | ## Building 49 | 50 | To build the project, run: 51 | 52 | ```shell 53 | npm run build 54 | ``` 55 | 56 | This will build the client and server. 57 | 58 | ```shell 59 | npm start 60 | ``` 61 | 62 | In production, you have a single server serving everything. 63 | 64 | `/api/*` is the API endpoint. 65 | `/*` is the client. 66 | 67 | ## Tests 68 | 69 | A test runner is not installed (right now). But ESLint and Prettier are checked on commit and pushed thanks to husky and lintstaged. 70 | 71 | ## Licensing 72 | 73 | MIT 74 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-express-boilerplate", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "clean": "rimraf dist", 6 | "dev": "concurrently \"npm run server:dev\" \"npm run client:dev\"", 7 | "client:dev": "vite", 8 | "server:dev": "nodemon src/server.js", 9 | "server:build": "babel --verbose --out-dir dist --only 'src/server.js,src/lib/' src", 10 | "client:build": "vite build", 11 | "build": "npm run server:build && npm run client:build", 12 | "serve": "vite preview", 13 | "prepare": "husky install", 14 | "test": "prettier --check . && eslint . && stylelint \"**/*.css\"", 15 | "start": "node dist/server.js" 16 | }, 17 | "devDependencies": { 18 | "@babel/cli": "^7.15.7", 19 | "@babel/core": "^7.15.7", 20 | "@vitejs/plugin-react": "^1.0.2", 21 | "babel-eslint": "^10.1.0", 22 | "babel-loader": "^8.2.2", 23 | "concurrently": "^6.2.1", 24 | "eslint": "^7.32.0", 25 | "eslint-config-prettier": "^8.3.0", 26 | "eslint-plugin-react": "^7.26.1", 27 | "eslint-plugin-react-hooks": "^4.2.0", 28 | "http-proxy-middleware": "^2.0.1", 29 | "husky": "^7.0.2", 30 | "lint-staged": "^11.1.2", 31 | "nodemon": "^2.0.13", 32 | "prettier": "2.4.1", 33 | "prop-types": "^15.7.2", 34 | "rimraf": "^3.0.2", 35 | "stylelint": "^13.13.1", 36 | "stylelint-config-prettier": "^8.0.2", 37 | "stylelint-config-standard": "^22.0.0", 38 | "vite": "^2.5.10" 39 | }, 40 | "dependencies": { 41 | "dotenv": "^10.0.0", 42 | "express": "^4.17.1", 43 | "react": "^17.0.2", 44 | "react-dom": "^17.0.2", 45 | "react-router-dom": "^5.3.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import logo from './logo.svg'; 3 | import styles from './App.module.css'; 4 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 5 | import Welcome from './components/Welcome/Welcome'; 6 | 7 | function App() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | 12 |
13 |
14 | logo 15 | 16 |

17 | 20 |

21 |

22 | Edit App.jsx and save to test HMR updates. 23 |

24 |

25 | 31 | Learn React 32 | 33 | {' | '} 34 | 40 | Vite Docs 41 | 42 |

43 | 44 | 45 |
About
46 | 47 | 48 |
Home
49 | 50 | 51 |
52 |
53 | 54 | ); 55 | } 56 | 57 | export default App; 58 | -------------------------------------------------------------------------------- /src/app/App.module.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/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classes from './Button.module.css'; 4 | 5 | function Button({ children }) { 6 | return ; 7 | } 8 | 9 | Button.propTypes = { 10 | children: PropTypes.element.isRequired, 11 | }; 12 | 13 | export default Button; 14 | -------------------------------------------------------------------------------- /src/app/components/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | color: #000; 3 | background: linear-gradient(180deg, #ffbb3b, #ffa90a); 4 | font-size: 0.8em; 5 | padding: 0.8em 2em; 6 | border: none; 7 | border-radius: 0.4em; 8 | text-transform: uppercase; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/components/Welcome/Welcome.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import classes from './Welcome.module.css'; 3 | 4 | function Welcome() { 5 | const [message, setMessage] = useState(''); 6 | 7 | useEffect(() => { 8 | fetch('/api/hello') 9 | .then((response) => response.json()) 10 | .then((data) => setMessage(data.message)); 11 | }, []); 12 | 13 | return

{message}

; 14 | } 15 | 16 | export default Welcome; 17 | -------------------------------------------------------------------------------- /src/app/components/Welcome/Welcome.module.css: -------------------------------------------------------------------------------- 1 | .message { 2 | font-weight: bold; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './globals.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.querySelector('#root') 11 | ); 12 | -------------------------------------------------------------------------------- /src/lib/router.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const router = express.Router(); 4 | 5 | router.get('/hello', async (_req, res) => { 6 | res.status(200).json({ message: 'Hello World!' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /src/server.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const express = require('express'); 3 | const router = require('./lib/router'); 4 | 5 | const { PORT = 3001 } = process.env; 6 | 7 | const app = express(); 8 | 9 | // Middleware that parses json and looks at requests where the Content-Type header matches the type option. 10 | app.use(express.json()); 11 | 12 | // Serve API requests from the router 13 | app.use('/api', router); 14 | 15 | // Serve app production bundle 16 | app.use(express.static('dist/app')); 17 | 18 | // Handle client routing, return all requests to the app 19 | app.get('*', (_req, res) => { 20 | res.sendFile(path.join(__dirname, 'app/index.html')); 21 | }); 22 | 23 | app.listen(PORT, () => { 24 | console.log(`Server listening at http://localhost:${PORT}`); 25 | }); 26 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import dotenv from 'dotenv'; 2 | dotenv.config(); 3 | 4 | import { defineConfig } from 'vite'; 5 | import react from '@vitejs/plugin-react'; 6 | 7 | const { PORT = 3001 } = process.env; 8 | 9 | // https://vitejs.dev/config/ 10 | export default defineConfig({ 11 | plugins: [react()], 12 | server: { 13 | proxy: { 14 | '/api': { 15 | target: `http://localhost:${PORT}`, 16 | changeOrigin: true, 17 | }, 18 | }, 19 | }, 20 | build: { 21 | outDir: 'dist/app', 22 | }, 23 | }); 24 | --------------------------------------------------------------------------------