Bootstrapting modern FE app

A note to my future self to bootstrap a FE app

This is my preferred setup for a front end app:

• Framework: React
• Programming language: typescript
• bundler: vite
• static code analysis: eslint
• test framework: jest
• CSS library: tailwind
• code formatter: Prettier

I. Bootstrap React and Tailwind

Vite requires node version 18+ or 20+, so it’s recommended to use nvm with correct version before creating a vite project.

nvm use 18

Then bootstrap the vite project

npm create vite@latest my-app -- --template react-ts

What’s included in the template: The template includes few useful tools with predefined config:

• bundler: config file in vite.config.js
• code static analysis: eslint with the config file eslintrc.cjs

Next, we’ll install tailwind follow this link https://tailwindcss.com/docs/guides/vite. Tailwind is a css utility framework that makes styling the components much easier.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update the content ofindex.css file like instruction from the tailwind doc, then we’re all set.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now just run npm run dev then you’re ready to roll!

II. Advanced setup for life improvement

1. Static analysis

The vite template already include eslint as code static analysis tool. Here’s a brieft explanation of what’s inside the generated config file

module.exports = {
  root: true, // stop eslint from looking up config in the parent directory
  env: { 
    browser: true, // browser global variables (e.g., window, document) are predefined
    es2020: true // the code uses ECMAScript 2020 features
  },
  extends: [ // pre-defined sets of static analysis rules
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn", // warn if anything other than a component is exported from a tsx or jsx file
      { allowConstantExport: true }, // but don't warn when a constant is exported
    ],
  },
};

2. Code formatting

I’m using VSCode as IDE, and Prettier is a quite popular code formatter. So the next part will be dedicated to configuring Prettier.

I also like to configure at Workspace level, this may sound repetitive, but there’re few benefits in doing that. The obvious reason is flexibility — different projects can have different settings. For example one project that you collaborate on may 2 spaces indenting, while the other may have 4 spaces indenting (not saying that I’d like to trigger a space-tab war here 😛). And when sharing your project with someone else, you have a degree of certainty that the formatting would work as expected. Another reason is clarity, you can see what affecting the workspace by just looking at a single workspace setting.json file.

1. Install Prettier from the Extension Marketplace
2. Select Prettier as default formatter for your IDE

If you missed above step, then when trying to format a document, VSCode will complain. But don’t worry, you’ll got chance to choose the default formatter at that time as well.

Verify that it works by issue the Format Document command on any open tsx file

If everything behave as they should, you will notice that the code would be nicely padded, line spacing adjusted, trailing semi-colons added, etc …

It’s recommended to configure VSCode to auto format on save, so that you don’t have to issue the format command manually. This is how the workspace setting would look like:

// .vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

You can also create an extensions.json file under .vscode folder to recommend others to use the same extensions as yours.

// .vscode/extensions.json
{
  "recommendations": ["esbenp.prettier-vscode"]
}

3. Node version

• create .nvmrc file to lock in the node version being used. For example below file will specify that

// .nvmrc
18.20