My preferred Vite template for FE challenges18 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
- 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
clsxfor combining classes and conditionally adding tw classes. Also, read my post on why Tailwind is Amazing: kashyapsuhas.com/blog/post/tailwind-supremacy
- TS - Because ...TS.
- 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).
- Generouted - Adds NextJS-like file-based routing. Super handy when you are doing multiple versions of something. Just create a file or folder under
pagesand the library should handle the rest.
Here's the repository github.com/kashyap07/vite-react-tailwind-sass-routes-starter/
3 ways to use this:
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:
- Create empty directory.
1mkdir <my-vite-app> 2cd <my-vite-app>
- Install a cloning tool like degit
1npm install -g degit
- 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!