DEV Community

Cover image for Get started with Vite Firebase Tailwindcss fastπŸ”₯πŸ”₯πŸ”₯
Drew Ronsman
Drew Ronsman

Posted on • Edited on

Get started with Vite Firebase Tailwindcss fastπŸ”₯πŸ”₯πŸ”₯

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 };
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Picture of the starter kit

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)

Collapse
 
neoprint3d profile image
Drew Ronsman

Sorry I'm so dumb I forgot to put the one thing I was talking about the GitHub repi

Collapse
 
mozi47 profile image
Muzakir Shah

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