How to Create a New React App Using Vite

When you find yourself looking up the same set of instructions and consistently finding the wrong ones over and over again, it’s time to document things for yourself. So, future self (and everyone else), this is how to create a new React app using Vite. This uses Typescript as well.

Before we get started, there a few requirements. First, install nvm, then use node version 18 or higher.

nvm use 18

Second, I’m using yarn for all the instructions here. If you prefer something else, you’ll need to translate it to the correct commands; they are slightly different.

Instructions

Run this command in your terminal to create the project and starter files:

yarn create vite app-name --template react-ts

Next, go into the folder, install all the dependencies, initialize a git repo, then get started:

cd app-name && yarn install && git init

Add Tailwind

Now, let’s add Tailwind because, why not?

yarn add --dev tailwindcss postcss autoprefixer

Then, create the tailwind config file:

npx tailwindcss init -p

Configure the template paths in the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Open the ./src/index.css file and add the @tailwind directives:

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

Add Prettier & ESLint

yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

touch .eslintrc.js .eslintignore prettierrc.js .prettierignore

Configure ESLint

Add the following to the .eslintrc.js file:

module.exports = {
  extends: [
    // By extending from a plugin config, we can get recommended rules without having to add them manually.
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/recommended',
    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
    // Make sure it's always the last config, so it gets the chance to override other configs.
    'eslint-config-prettier',
  ],
  settings: {
    react: {
      // Tells eslint-plugin-react to automatically detect the version of React to use.
      version: 'detect',
    },
    // Tells eslint how to resolve imports
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    // Add your own rules here to override ones from the extended configs.
  },
};

ESLint ignore

Add the following to the .eslintignore file:

node_modules/
dist/
.prettierrc.js
.eslintrc.js
env.d.ts

Configure Prettier

Add the following to the prettierrc.js file:

module.exports = {
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true
}

Prettier ignore

Add the following to the .prettierignore file:

node_modules/
dist/
.prettierrc.js

Build Stuff

Start things up and test it out:

yarn dev

Optional

If you prefer using yarn start and having the development auto-open when it starts up, go to the package.json file and add:

"start": "vite --open",

Go build stuff!