Link Search Menu Expand Document

Vite

yarn create vite
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "create-redwood-app > @redwoodjs/internal > @babel/plugin-transform-typescript@7.14.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "create-redwood-app > @redwoodjs/internal > @graphql-codegen/typescript-react-apollo@2.2.5" has unmet peer dependency "graphql-tag@^2.0.0".
warning "create-redwood-app > @redwoodjs/internal > @babel/plugin-transform-typescript > @babel/helper-create-class-features-plugin@7.14.6" has unmet peer dependency "@babel/core@^7.0.0".
warning "create-redwood-app > @redwoodjs/internal > @babel/plugin-transform-typescript > @babel/plugin-syntax-typescript@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "create-redwood-app > @redwoodjs/internal > @graphql-codegen/cli > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.5.3" with binaries:
      - create-vite
      - cva
✔ Project name: ...
✔ 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

    commitizen init cz-conventional-changelog --yarn --dev --exact
}

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",
    "serve": "vite preview"
  },
  • Run prepare script once
yarn run prepare
yarn run v1.22.10
$ husky install
husky - Git hooks installed
✨  Done in 0.13s.
  • Add hooks:
npx husky add .husky/pre-commit "npx lint-staged"

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";

React Router

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

urql

yarn add urql graphql graphql-tag

Authentication

yarn add @urql/exchange-auth

Recoil

yarn add recoil

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.