We all know how boring and tedious it is to create new projects from scratch. It is time consuming, and it is just a lot of repetitive boiler plate code.
That is why I created the ultimate starter template for Vite. Some features include:
- Crypto Js - for encryption 🔒
- Tailwindcss - for styling 💅
- Typescript - for more reliable code 🔐
- Firebase - for Baas 💾
- React Snap and React Helmet - for SEO 🔍
- React Use - for useful premade react hooks 🪝
- React transition group - for smooth animations 📺
- React icons - for icons 💖
Some quality of life improvements include
A preconfigured file in the utils/firebase.ts already configured with the environment variables and the env. So it is just copy and paste your firebase credentials into the .env file.
./utils/firebase.ts
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getPerformance } from "firebase/performance";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIRE_API_KEY,
authDomain: import.meta.env.VITE_FIRE_AUTH_DOM,
projectId: import.meta.env.VITE_FIRE_PRJ_ID,
storageBucket: import.meta.env.VITE_FIRE_STG_BKT,
messagingSenderId: import.meta.env.VITE_FIRE_MSG_ID,
appId: import.meta.env.VITE_FIRE_APP_ID,
measurementId: import.meta.env.VITE_FIRE_MESG_ID,
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
//type the auth and firestore functions
const auth = getAuth();
const firestore = getFirestore(app);
const performance = getPerformance(app);
const storage = getStorage(app);
export { analytics, auth, firestore, performance, storage };
Routing
is preconfigured and already done in the App.tsx file and main.tsx
Encryption
functions encrypt and decrypt are already made in ./utils/encryption.ts
SEO
the main.tsx file is already configured with the appropriate code react snap needs to run
Production
scripts on production already have a prod script so you can ship your app with SEO and performance
Installing the template
git clone https://github.com/NeoPrint3D/vite-starter-kit
cd vite-starter-kit
#use anyone of these commands to install dependencies
pnpm install
yarn install
npm install
#start the project
pnpm dev
Thanks for reading any question just email me np3d.dev@gmail.com
And please star the GitHub repo:
https://github.com/NeoPrint3D/vite-starter-kit
Top comments (2)
Sorry I'm so dumb I forgot to put the one thing I was talking about the GitHub repi
Have you encounter the intial load issue? using Vite with Tailwindcss, the first time its takes around 15 to 20s in loading but after that its faster.
github.com/vitejs/vite/issues/5145