Full Project Setup (Vite):

Steps:

1. Vite
2. Tailwind
3. DaisyUI
4. Router
5. Firebase

Setting Up Server

6. Environment Variables
7. React Icons
8. Vercel Hosting

Vite Setup:

Ref: Vite Official

npm create vite@latest

Steps:

npm create vite@latest

Write project-name

Javascript + SWC

cd project-name

npm i

npm run dev

React Router Setup:

npm install react-router-dom

JWT Authentication for WP REST API

Plugin Link

Steps:

1. To enable this option you’ll need to edit your .htaccess file adding the follow:
   RewriteEngine on

   RewriteCond %{HTTP:Authorization} ^ (.) RewriteRule ^(.) - [E=HTTP_AUTHORIZATION:%1]

2. Add this line in wp-config.php file

   define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');

Key Generator: You can use a string from here: https://api.wordpress.org/secret-key/1.1/salt/

3. Configurate CORs Support:

To enable the CORs Support edit your wp-config.php file

define('JWT_AUTH_CORS_ENABLE', true);

Access jwt routes/ endpoints:

https://vitewp.com/wp-json/jwt-auth/v1

Tailwind for Vite:

Ref: https://tailwindcss.com/docs/guides/vite#react

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Note:

Make sure that these two files are created:

Created Tailwind CSS config file: tailwind.config.js

Created PostCSS config file: postcss.config.js

Add this in tailwind.config.js

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

Add these lines in index.css

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

For Tailwind typography:

Ref: https://tailwindcss.com/docs/typography-plugin

npm install -D @tailwindcss/typography

Add this in tailwind.config.js

import  twTypography  from  "./node_modules/@tailwindcss/typography";

Add dependency for typography:

[Daisyui for Vite:]

(https://docs.google.com/document/d/1T_CbwAOwBtlsJwz-HIfJ5zsYIFKwZbSQGxlMmejNgEA/edit?usp=sharing)

Ref: https://daisyui.com/docs/install/

npm i -D daisyui@latest

Steps:

1. Add this lines in tailwind.config.js

import daisyUI from "./node_modules/daisyui";

2. Add it as dependency:

React Hooks for Vite:

Ref: https://react-hook-form.com/get-started

npm install react-hook-form

Axios for Vite:

Ref: https://axios-http.com/docs/intro

npm install axios

Vite-plugin-require for Vite:

Ref: https://www.npmjs.com/package/vite-plugin-require

Install and use to achieve painless support require

npm i vite-plugin-require

Import and add it as dependency:

import  vitePluginRequire  from  "vite-plugin-require";
export default defineConfig({
plugins: [react(),  vitePluginRequire.default()],
})

Environment variable for Vite:

Ref: https://www.npmjs.com/package/env-cmd

A simple node program for executing commands using an environment from an env file.

npm install env-cmd

or

npm install -g env-cmd