├── .eslintrc ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── package-lock.json ├── package.json └── src ├── app.js ├── components └── maths.js ├── index.html └── styles └── index.scss /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["eslint:recommended", "airbnb-base", "plugin:import/errors", "plugin:prettier/recommended"], 4 | "plugins": ["prettier"], 5 | "rules": { 6 | "prettier/prettier": "error", 7 | "import/prefer-default-export": 0 8 | }, 9 | "env": { 10 | "browser": true, 11 | "es6": true, 12 | "node": true 13 | }, 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .parcel-cache 3 | dist -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "files.autoSave": "onFocusChange", 4 | "eslint.validate": ["javascript"], 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": "explicit" 7 | }, 8 | "workbench.colorCustomizations": { 9 | "xterminal.background": "#282936", 10 | "xterminal.foreground": "#E9E9F4", 11 | "terminalCursor.background": "#E9E9F4", 12 | "terminalCursor.foreground": "#E9E9F4", 13 | "terminal.ansiBlack": "#282936", 14 | "terminal.ansiBlue": "#62D6E8", 15 | "terminal.ansiBrightBlack": "#626483", 16 | "terminal.ansiBrightBlue": "#62D6E8", 17 | "terminal.ansiBrightCyan": "#A1EFE4", 18 | "terminal.ansiBrightGreen": "#EBFF87", 19 | "terminal.ansiBrightMagenta": "#B45BCF", 20 | "terminal.ansiBrightRed": "#EA51B2", 21 | "terminal.ansiBrightWhite": "#F7F7FB", 22 | "terminal.ansiBrightYellow": "#00F769", 23 | "terminal.ansiCyan": "#A1EFE4", 24 | "terminal.ansiGreen": "#EBFF87", 25 | "terminal.ansiMagenta": "#B45BCF", 26 | "terminal.ansiRed": "#EA51B2", 27 | "terminal.ansiWhite": "#E9E9F4", 28 | "terminal.ansiYellow": "#00F769", 29 | "terminal.background": "#282936", 30 | "terminal.foreground": "#E9E9F4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Starter Kit 2 | 3 | The starter kit contains all the necessary packages and scripts that you would need to kick off your next web development project using modern JavaScript and Parcel 2. 4 | 5 | There's no need to configure Webpack, Eslint or Babel, just clone this repository and you are good to go. The boilerplate also includes a minimal project in the `./src` directory to help you quickly spin up a project. 6 | 7 | If something doesn’t work, please tweet [@labnol](https://twitter.com/labnol). 8 | 9 | ## Getting Started 10 | 11 | - Get a copy of the code 12 | 13 | ```bash 14 | git clone https://github.com/labnol/javascript-starter my-project 15 | cd my-project 16 | ``` 17 | 18 | - Install the package dependencies 19 | 20 | ```bash 21 | npm install 22 | ``` 23 | 24 | Note: if you have the Yarn package manager installed, you can just run yarn. 25 | 26 | - Open the source code in Visual Studio Code and modify the application to your liking 27 | 28 | ```bash 29 | code . 30 | ``` 31 | 32 | - Run the app in development. Open localhost:8080 to view the app in your browser. The page will automatically reload if you make any changes to the code. 33 | 34 | ```bash 35 | npm start 36 | ``` 37 | 38 | - Build the app for production to the `dist/` folder. Parcel (version 2) bundles the app in production mode and optimizes the build for the best performance. 39 | 40 | ```bash 41 | npm run build 42 | ``` 43 | 44 | Your app is ready to be deployed. 45 | 46 | ## Contributing 47 | 48 | We'd love to have your helping hand. Ping me on twitter [@labnol](https://twitter.com/labnol) to discuss or file an issue. 49 | 50 | ### License 51 | 52 | JavaScript Starter Kit for Modern Web Development is open source software licensed as MIT. 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-starter", 3 | "version": "3.0.0", 4 | "description": "A starter kit for building web projects with modern JavaScript", 5 | "author": { 6 | "name": "Amit Agarwal", 7 | "email": "amit@labnol.org", 8 | "url": "https://digitalinspiration.com/" 9 | }, 10 | "license": "MIT", 11 | "scripts": { 12 | "prebuild": "rimraf ./dist", 13 | "format": "prettier --write src/**/*.{js,json,md}", 14 | "build": "parcel build", 15 | "start": "parcel" 16 | }, 17 | "keywords": [ 18 | "javascript", 19 | "webpack", 20 | "eslint", 21 | "prettier", 22 | "parcel", 23 | "es6", 24 | "babel", 25 | "vscode" 26 | ], 27 | "source": "src/index.html", 28 | "browserslist": "> 0.5%, last 2 versions, not dead", 29 | "targets": { 30 | "default": { 31 | "includeNodeModules": true, 32 | "optimize": true, 33 | "distDir": "./dist", 34 | "sourceMap": false 35 | } 36 | }, 37 | "engines": { 38 | "node": ">16" 39 | }, 40 | "devDependencies": { 41 | "@babel/core": "^7.23.9", 42 | "@babel/preset-env": "^7.23.9", 43 | "@parcel/transformer-sass": "^2.11.0", 44 | "eslint": "^8.56.0", 45 | "eslint-config-airbnb-base": "^15.0.0", 46 | "eslint-config-prettier": "^9.1.0", 47 | "eslint-plugin-import": "^2.29.1", 48 | "eslint-plugin-prettier": "^5.1.3", 49 | "node-sass": "^9.0.0", 50 | "parcel": "^2.11.0", 51 | "prettier": "^3.2.5", 52 | "rimraf": "^5.0.5" 53 | }, 54 | "dependencies": { 55 | "lodash": "^4.17.21" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import range from 'lodash/range'; 2 | import shuffle from 'lodash/shuffle'; 3 | import { add } from './components/maths'; 4 | 5 | const x = 10; 6 | const y = 32; 7 | 8 | const root = document.getElementById('root'); 9 | root.innerHTML = `${x} + ${y} = ${add(x, y)}`; 10 | 11 | const array = range(0, 100, 10); 12 | const shuffledArray = shuffle(array); 13 | root.innerHTML += `

${array} => ${shuffledArray}`; 14 | 15 | root.innerHTML += `

The current date is ${new Date().toLocaleDateString()}`; 16 | -------------------------------------------------------------------------------- /src/components/maths.js: -------------------------------------------------------------------------------- 1 | const add = (a = 12, b = 13) => a + b; 2 | 3 | const subtract = (a, b) => { 4 | if (a < b) return b - a; 5 | return a - b; 6 | }; 7 | 8 | export { add, subtract }; 9 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Starter Kit 7 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 19 | 20 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | #root { 2 | font-weight: bold; 3 | } 4 | --------------------------------------------------------------------------------