My preferred Vite template for FE challenges

18 Mar 2023

Vite starters have essentially replaced CRA - Create React App as a simple/standard way to setup a basic client-side rendering React App.

This is what I use for any kind of Frontend challenges thrown at me.

Tech choices and why

  1. Tailwind - I've gotten very used to Tailwind at this point, I'm much faster with it compared to plain old CSS or any pre-processor. I've included clsx for combining classes and conditionally adding tw classes. Also, read my post on why Tailwind is Amazing:
  2. TS - Because ...TS.
  3. Sass - For times when Tailwind cannot support some complex styles. Or I have to edit the tailwind config file - which isn't good (for our case).
  4. Generouted - Adds NextJS-like file-based routing. Super handy when you are doing multiple versions of something. Just create a file or folder under pages and the library should handle the rest.

Setup options

Here's the repository

3 ways to use this:

1. Stackblitz

Just click this button and fork!
Open on stackblitz

2. Use as a Github template

This project is set up as a template. When creating a new project, select this as the template.

3. Local development

Instructions for npm:

  1. Create empty directory.
1mkdir <my-vite-app>
2cd <my-vite-app>
  1. Install a cloning tool like degit
1npm install -g degit
  1. Clone this template
1npx degit kashyap07/vite-react-tailwind-sass-routes-starter

And to run:

1npm install
2npm run dev

This should start around localhost:5173. Enjoy!