A boilerplate for Vite, React, Tailwindcss with filesystem based routing

Related tags

Boilerplate template
Overview

Template

This is a React, Vite, Tailwind template. It features filesystem based routing, similar(ish) to Next.js. It also formats and serves markdown files.

Linting is built in with eslint + Airbnb linting rules.

Filesystem based routing

In src/pages you can add a new file and a route for the component in that file will automatically exist based on the file name.

In src/pages/posts you can add a markdown file and a route will automatically exist for that file and be served, formatted according to the template in src/pages/posts/[post].jsx

You can navigate to localhost:3000/posts/demo to see this

Thanks to this page for inspiration on filesystem based routing.

Deployment

This project deploys easily to modern hosts. I have deployed succesfully to Firebase. Build files are output to the dist directory.

You might also like...
πŸš€ A Vite Typescript SSR React boilerplate!
πŸš€ A Vite Typescript SSR React boilerplate!

A blazingly modern web development stack. This template repo tries to achieve the minimum viable example for each of the following:

A Minimal Setup & Fast Boilerplate for React.js with Vite.
A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features πŸš€ Dynamic Pages Routing with react-router-dom from React.js πŸš€ Fast development wi

A Minimal Setup & Fast Boilerplate for React.js with Vite.
A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features πŸš€ Dynamic Pages Routing with react-router-dom from React.js

⚑ A boilerplate for Vite.js, React.js. Emotion.sh, & TypeScript.

Vret Boilerplate ⚑ Vret stands for Vite, React, Emotion, TypeScript. It's fast & faster than create-react-app! πŸƒβ€β™‚οΈ Installation Choose an option: Do

A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript with Styling reset.

VRST Boilerplate ⚑ Vrst stands for Vite, React, Styed-Components, TypeScript. It's fast & faster than create-react-app! πŸƒβ€β™‚οΈ Installation Choose an o

πŸ’¨ A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate πŸ’¨ VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

A boilerplate generator for VR2T β†’ Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator πŸ’¨ VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

logseq plugin boilerplate w/ React & Vite

logseq plugin boilerplate w/ React & Vite

⚑️ Super-fast electron + vite boilerplate. Support React/Vue template.
⚑️ Super-fast electron + vite boilerplate. Support React/Vue template.

electron-vite-template Run Setup # clone the project git clone [email protected]:caoxiemeihao/electron-vite-template.git # enter the project directory c

Owner
Chris Dzoba
Chris Dzoba
Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla

Vite Electron Builder Boilerplate Vite+Electron = ?? This is a template for secure electron applications. Written following the latest safety requirem

Alex Kozack 1.5k Jan 4, 2023
React-calculator - A calculator using React, TypeScript, Vite.js and TailwindCSS, inspired by iOS calculator UI

React Calculator A calculator inspired by iOS calculator UI. Live demo here. Tab

Fellipe Utaka 3 Nov 20, 2022
PDMLab 27 Dec 6, 2022
Vite templete for react typescript eslint jest tailwindcss

vite-react-ts-extended vite react-ts templete + eslint, jest, tailwindcss This is the official Vite template(npm init [email protected] myapp -- --template

Laststance.io 66 Dec 24, 2022
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian JosΓ© Torrealba RondΓ³n 4 Nov 11, 2022
Vite-react-template: A starter for React with Typescript with the fast Vite

vite-react-template vite + react + router + ts A starter for React with Typescript with the fast Vite directory src assets components layout pages ins

μ„€μ•„μ•„λΉ  1 Mar 22, 2022
Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

Christian Hansen 25 Dec 18, 2022
Redux app demonstrating isomorphic rendering and routing (with redux-devtools).

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. Features As

Callum Rimmer 384 Dec 31, 2022
Boilerplate - react + tailwindcss + ant-design + typescript

tw-antd-start-react-ts boilerplate - react + tailwindcss + ant-design + typescript Created with reactjs, tailwindcss, ant-design Screenshots Running l

Carlos Henrique 11 Sep 30, 2022
NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

null 2 Nov 7, 2022