빠르게 Vite Firebase Tailwindcss 시작하기🔥🔥🔥

우리 모두는 처음부터 새로운 프로젝트를 만드는 것이 얼마나 지루하고 지루한 일인지 알고 있습니다. 시간도 많이 걸리고, 반복적인 상용구 코드가 많을 뿐입니다.

이것이 제가 Vite를 위한 궁극의 스타터 템플릿을 만든 이유입니다. 일부 기능은 다음과 같습니다.

Crypto Js - 암호화용 🔒

Tailwindcss - 스타일링용 💅

Typescript - 보다 안정적인 코드용 🔐

Firebase - Baas용 💾

React Snap 및 React 헬멧 - SEO용 🔍

반응 사용 - 유용한 미리 만들어진 반응 후크 🪝

반응 전환 그룹 - 부드러운 애니메이션용 📺

반응 아이콘 - 아이콘용 💖

일부 삶의 질 향상에는 다음이 포함됩니다.

환경 변수 및 env로 이미 구성된 utils/firebase.ts의 사전 구성된 파일입니다. 따라서 Firebase 자격 증명을 복사하여 .env 파일에 붙여넣기만 하면 됩니다.

./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 };

라우팅

App.tsx 파일 및 main.tsx에서 사전 구성되고 이미 완료됨

암호화

encrypt 및 decrypt 기능은 이미 ./utils/encryption.ts에서 만들어졌습니다.

SEO

main.tsx 파일은 실행에 필요한 적절한 코드 반응 스냅으로 이미 구성되어 있습니다.

생산

프로덕션의 스크립트에는 이미 prod 스크립트가 있으므로 SEO 및 성능으로 앱을 출시할 수 있습니다.

템플릿 설치

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

질문을 읽어주셔서 감사합니다. 저에게 이메일을 보내주세요[email protected].

그리고 GitHub 리포지토리에 별표를 표시하십시오.
https://github.com/NeoPrint3D/vite-starter-kit