React Tailwindcss Redux Boilerplate build with Vite

This is a ReactJS + Vite boilerplate to be used with Tailwindcss, Redux.

What is inside?

This project uses many tools like:

• ReactJS
• Vite
• TypeScript
• Tailwindcss
• Redux
• Eslint
• Prettier

Getting Started

Install

Create the project.

npx degit https://github.com/devslane/vite-react-redux-tailwind-boilerplate my-app

Access the project directory.

cd my-app

Install dependencies.

yarn

Serve with hot reload at http://localhost:3000.

yarn run dev

Details

• Change the title of the webpage

  • Go to index.html
  • Change the text in title tag

• How to use .env variables ?

  • Add env variables to .env file (use .env.[development/production] as per your current environment)

  • Use VITE_ prefix to your env variables to let vite compiler know that these variables can be publicly accessed.

  • This is as per personal choice. Use a separate env constant file to export the env variables. (Vite uses not a good to eye method to use the env variables :) ). See example below

const ENV_CONFIG = {
  BACKEND_URL: import.meta.env.VITE_BACKEND_URL!
};

export default ENV_CONFIG;