texmeijin / vite-react-ts-tailwind-firebase-starter

Starter using Vite + React + TypeScript + Tailwind CSS. And already set up Firebase(v9), Prettier and ESLint.

⚡ vite-react-ts-tailwind-starter

Starter using Vite + React + TypeScript + Tailwind with Firebase.

Motivation

Improve building your faster prototyping by using Vite, TypeScript, React, TailwindCSS, Firebase.

This starter uses following libraries:

• Vite
• React
  • React Router
• TypeScript
• Tailwind CSS
  • daisyUI
• Firebase(v9, modular)
• ESLint
• Prettier

Set up

mv .env.local.example .env.local
yarn
yarn dev

Firebase

If you DO NOT use Firebase, you should do:

• Delete the Firebase-related code: you check Main.tsx, SignInButton.tsx, SignOutButton.tsx.
• And then delete src/lib/firebase.ts
• Run yarn remove firebase
• Remove VITE_FIREBASE_* env values from .env.local

If you want to use Firebase, you should do:

• copy Firebase env values from Firebase Console, and paste them to .env.local.
• enable Google Auth in Firebase Console. ref: https://firebase.google.com/docs/auth/web/google-signin#before_you_begin

Vite

Vite is a fast frontend build tool. According to the README, it consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

React

React is a JavaScript library for building user interfaces.

Due to its awesome renderer system, there are many React Renderor. So React can be not used only Web, for example, used by React Native.

Let's dive into React and Vite can use with React.

TypeScript

TypeScript is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler.

When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by Type-Safe template.

Tailwind CSS

Tailwind CSS is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

In VSCode, I recommend to use intellisense extension.

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, styled-components, linaria, and so on. Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.

When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them!

daisyUI

daisyUI is Tailwind CSS Components library.

It prepares components CSS classes such as 'btn'. If you provide 'btn' class to <button> element, then there should be placed completely designed button.

If you don't want to use it, just remove the package and remove config in tailwind.config.js.

Firebase

Firebase is a PaaS that makes us create hi-quality apps so easy and so fast.

This library is not suitable for everyone, but I think it is one of the best libraries for prototyping. Therefore, I have added it to this repository.

The Firebase js SDK has become very useful in version 9, with optimizations that greatly reduce bundle size.

How to Use

Please look at firebase.ts.

There you will find a set of utility functions to manipulate Firebase for the environment in which the Emulator is used.

Formatter and Linter

Already set up ESLint and Prettier. You can customize the rules.

NOTICE: The template does not use eslint-plugin-prettier and prettier-eslint. So I recommend that running commands individually. e.g. prettier && eslint.

Please read: https://prettier.io/docs/en/integrating-with-linters.html.

ToDo

• install and set up TailwindCSS/JIT see this PR

---

Support me!

vite-react-ts-tailwind-firebase-starter's Issues

English Code Tour

Thank you for the template!
I really like the idea of incluiding a Code Tour in the template. Would it be possible for you to translate the tour into English? :)

Command "rm" not found.

When I run yarn rm firebase, it shows Command "rm" not found.

I've tried to run it on cmd and git bash. I'm using windows 10

CSP Error in Safari in Login

Thanks for the template/starter! I am currently experiencing an error, and I am not sure exactly where it is coming from. Right now it is still very much the starting template project, with my custom env configured with my firebase credentials. When clicked, it redirects to google auth, and then redirects back on login. While this works seamlessly on Chrome, it seems to create an error in Safari with the following:

Unrecognized Content-Security-Policy directive 'require-trusted-types-for'

When it redirects back to my app, it doesn't appear to have correctly logged in the user (the login button remains). Again, this is something that only appears to happen in Safari, and Chrome works fine. Is this something that is mis-configured in Vite, firebase, or missing in this template? Thanks!

Service Name = ?

In the .env.local file - what does the "service name" refer to? Does that refer to the app name, or something else? I don't see anything explicitly referred to as "service name" in the firebase console

Thank you!

Refine prettier and eslint config

• Setting up lint-staged
• Setting up npm scripts. For example, npm run lint
• Change the prettier config to semi: true.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	eslint-plugin-node

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace dependency eslint-plugin-node with eslint-plugin-n ^14.0.0
• chore(deps): update dependency autoprefixer to ^10.4.19
• chore(deps): update dependency tailwindcss to ^3.4.5
• chore(deps): update dependency vite-tsconfig-paths to ^4.3.2
• fix(deps): update dependency @headlessui/react to ^1.7.19
• chore(deps): update dependency @vitejs/plugin-react to ^4.3.1
• chore(deps): update dependency eslint to ^8.57.0
• chore(deps): update dependency eslint-plugin-promise to v6.4.0
• chore(deps): update dependency eslint-plugin-react to ^7.34.4
• chore(deps): update dependency typescript to ^5.5.3
• chore(deps): update dependency eslint to v9
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency @headlessui/react to v2
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency postcss to ^8.4.39
• chore(deps): update dependency prettier to ^3.3.3
• chore(deps): update dependency vite to ^4.5.3
• chore(deps): update react monorepo (@types/react, @types/react-dom, react, react-dom)
• chore(deps): update typescript-eslint monorepo to ^6.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency daisyui to ^4.12.10
• fix(deps): update dependency react-router-dom to ^6.24.1
• chore(deps): update dependency vite to v5
• fix(deps): update dependency firebase to v10
• fix(deps): update dependency react-helmet-async to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @headlessui/react ^1.7.18
• daisyui ^4.6.1
• firebase ^9.23.0
• react ^18.2.0
• react-dom ^18.2.0
• react-helmet-async ^1.3.0
• react-router-dom ^6.21.3
• @types/react 18.2.50
• @types/react-dom 18.2.18
• @types/react-router-dom ^5.3.3
• @typescript-eslint/eslint-plugin ^6.20.0
• @typescript-eslint/parser ^6.20.0
• @vitejs/plugin-react ^4.2.1
• autoprefixer ^10.4.17
• eslint ^8.56.0
• eslint-config-prettier ^9.1.0
• eslint-config-standard ^17.1.0
• eslint-plugin-import ^2.29.1
• eslint-plugin-node ^11.1.0
• eslint-plugin-promise 6.1.1
• eslint-plugin-react ^7.33.2
• postcss ^8.4.33
• prettier ^3.2.4
• tailwindcss ^3.4.1
• typescript ^5.3.3
• vite ^4.4.9
• vite-tsconfig-paths ^4.3.1

---

• Check this box to trigger a request for Renovate to run again on this repository

The Dev server is stuck at page load while no errors in termial

how keep

how keep it live on vercel

1. to deploy the repo on vercel , i did like this:
   ROOT DIRECTORY: ./
   BUILD COMMAND: npm run build
   OUTPUT DIRECTORY: ./dist
   then ,result is :Deployment failed

2. another repo also Powered by React, Tailwind CSS, Vite and TypeScript: https://github.com/spencerwooo/portfolio-react
   to deploy the repo on vercel , i did like this:
   ROOT DIRECTORY: ./
   BUILD COMMAND: npm run build
   OUTPUT DIRECTORY: ./dist
   then ,result is :Deployment success: https://portfolio-index-1.vercel.app
   but, the page of projects reload (f5) is 404: https://portfolio-index-1.vercel.app/projects
   how can i fix it ? thanks for your help !