JavaScript app startup workflow

js-app-startup.md

JavaScript App Startup Workflow

Last updated: 5 Jan 2024

Initialize Project

1. Create new repo on Github
2. cd into the appropriate parent directory and clone repo locally via the command-line interface. For example:

   cd ~/path/to/directory
   git clone git@github.com:username/repo-name.git
   

3. code directory-name to open new workspace in VSCode for the new repo (or use the File menu)
4. Write README.md and make first commit
5. npm init -y to initialize package.json file
6. If running project in Node.js, add "type": "module" to package.json file in order to use ES6 modules
7. echo node_modules/> .gitignore to create a .gitignore with node_modules/ added

If Building a Web App

Install Webpack

Reference: https://webpack.js.org/guides/getting-started/

1. npm install webpack webpack-cli --save-dev to install webpack
2. Set up src/ and dist/ directories
3. Create index.js within src/ directory
4. Create index.html and style.css within dist/ directory
5. Link to style.css and main.js in index.html
6. Create a webpack.config.js file:

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     mode: 'development',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist'),
     },
   };
   

7. In package.json add the following lines to the "scripts" object:

   "build": "webpack",
   "build-watch": "webpack --watch"
   

Set up Babel

Reference: https://github.com/babel/babel-loader
Reference: https://blog.jakoblind.no/babel-preset-env/
Reference: https://browsersl.ist/

1. npm install --save-dev @babel/core @babel/cli to install Babel
2. npm install --save-dev @babel/preset-env to install a preset
3. npm install --save-dev babel-loader to allow transpiling JavaScript files using Babel and webpack
4. echo -e "{\n \"presets\": [\"@babel/preset-env\"]\n}"> .babelrc to create a .babelrc file and configure the "presets" section. When opened, it should look like the following:

   {
     "presets": ["@babel/preset-env"]
   }
   

5. In webpack.config.js add the following to the module.exports object:

   module: {
     rules: [
       {
         test: /\.(?:js|mjs|cjs)$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {}
         }
       }
     ]
   }
   

6. echo \>0.25% and not dead> .browserlistrc to create a .browserlistrc file and add >0.25% and not dead (or compose otherwise as needed)

Properly Configure Github Languages

1. echo "dist/* linguist-vendored=false"> .gitattributes to create a .gitattributes file and add dist/* linguist-vendored=false

Set up Prettier and ESLint

Set up Prettier

Reference: https://gist.github.com/ManonLef/2d3de90cbbdf9db563cbc786c21ae1cc
Reference: https://medium.com/@kiran.jasvanee/prettier-auto-formatting-in-visual-studio-code-beab1c026b13

1. npm install --save-dev --save-exact prettier
2. echo -e "{\n \"singleQuote\": true\n}"> .prettierrc.json to create a .prettierrc.json file (needed to recognize this repo uses prettier). When opened, it should look like the following:

   {
     "singleQuote": true
   }
   

3. echo -e "node_modules/\ndist/main.js"> .prettierignore to create a .prettierignore file with node_modules/ and dist/main.js included (or compose otherwise as needed)
4. (Be sure Prettier VSCode extension is installed)
5. Within the .vscode directory, create a settings.json file and add the following in order to format on save:

   {
     "editor.formatOnSave": true
   }
   

   Or open workspace settings wih VSCode command palette, go to "Workspace" tab, select "Text Editor" dropdown, select "Formatting", check "Format on Save"

Set up ESLint

Reference: https://eslint.org/docs/latest/use/getting-started
Reference: https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code

1. npm init @eslint/config to initialize ESLint and create config file
2. Configure the resulting .eslintrc.* file via the prompts
3. (Be sure ESLint VSCode extenion is installed)
4. Customize the .eslintrc.* "rules" object. For example:

   "rules": {
       "consistent-return": "off",
       "import/extensions": ["error", "always"],
       "no-console": "off",
       "no-else-return": ["error", {
           "allowElseIf": true
       }],
       "no-param-reassign": ["error", {
           "props": false
       }],
       "no-plusplus": "off",
       "no-unused-expressions": ["error", {
           "allowTernary": true
       }],
       "no-use-before-define": ["error", {
           "functions": false,
           "classes": false
       }]
   }
   

Make ESLint and Prettier Play Nice

1. npm install --save-dev eslint-config-prettier to make ESLint and Prettier work together without conflict
2. Add "prettier" to the end of the "extends" array in your .eslintrc.* file. For example:

   "extends": [
       "airbnb-base",
       "prettier"
   ],
   

3. npx eslint-config-prettier path/to/main.js to see if there are conflicts (replace path/to/main.js with your main.js file path)

Install Jest

Reference: https://jestjs.io/docs/getting-started

1. npm install --save-dev jest to install Jest
2. Add the following to the "scripts" object in your package.json file:

   "test": "jest",
   "test-watch": "jest --watch *.js",
   

3. Add the following to your .eslintrc.* file:

   "overrides": [
       {
           "files": [
               "**/*.test.js",
               "**/*.test.jsx"
           ],
               "env": {
               "jest": true
           }
       }
   ],
   

Help Jest recognize ES6 import statements

Reference: https://jestjs.io/docs/en/getting-started#using-babel

1. npm install --save-dev babel-jest @babel/core @babel/preset-env to install the babel-jest dependency
2. Update the contents of your .babelrc file to look like the following:

   {
     "presets": [["@babel/preset-env", {
       "targets": {
         "node": "current"
       }
     }]]
   }