Vite

p:: CLI

yarn create vite

yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
 
success Installed "[email protected]" with binaries:
      - create-vite
      - cva
✔ Project name: … vite-project
✔ Select a framework: › react
✔ Select a variant: › react-ts
 
Scaffolding project in /Users/adithya321/...
 
Done. Now run:
 
  cd ...
  yarn
  yarn dev
 
✨  Done in 46.26s.

{
    volta pin node
    volta pin yarn
}

Formatting Code Automatically

{
  yarn add -D husky lint-staged prettier
 
  echo "{ \"singleQuote\": true, \"jsxSingleQuote\": true }" > .prettierrc.json
}

Edit package.json > prepare script

vim package.json

...
  "scripts": {
    "prepare": "husky install",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
...

Run prepare script once

yarn run prepare

yarn run v1.22.17
warning package.json: No license field
$ husky install
husky - Git hooks installed
✨  Done in 0.36s.

Add hooks:

npx husky add .husky/pre-commit "npx lint-staged"

husky - created .husky/pre-commit

Add the following field to the package.json section:

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]
  }

Ant Design

yarn add antd @ant-design/icons

vim src.index.css

@import "~antd/dist/antd.css";

How to Change Between Light and Dark Themes in Ant Design

React Router

{
    yarn add react-router-dom
    yarn add -D @types/react-router-dom
}

urql

yarn add urql graphql graphql-tag

https://formidable.com/open-source/urql/docs/basics/react-preact/

Authentication

yarn add @urql/exchange-auth

Recoil

yarn add recoil

Atom Effects

Env Variables and Modes

Vite exposes env variables on the special import.meta.env object.

import.meta.env.MODE: {string} the mode the app is running in.
import.meta.env.BASE_URL: {string} the base url the app is being served from. This is determined by the base config option.
import.meta.env.PROD: {boolean} whether the app is running in production.
import.meta.env.DEV: {boolean} whether the app is running in development (always the opposite of import.meta.env.PROD)

.env Files

Vite uses dotenv to load additional environment variables from the following files in your environment directory:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code. e.g. the following file:

DB_PASSWORD=foobar
VITE_SOME_KEY=123

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but DB_PASSWORD will not.

🪴 Adithya Jayasankar

Explorer