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

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 command line interface for file handling using JCore.FileSystem

A command line interface for file handling using JCore.FileSystem

JCore.FileSystem.Cli Table of Contents JCore.FileSystem.Cli Table of Contents Introduction Installation Uninstall Usage References Articles Packages T

Jan 21, 2022

An easy way to discover and manage your cloud like a local filesystem

An easy way to discover and manage your cloud like a local filesystem

cfs An easy way to discover and manage your cloud like a local filesystem. The swiss army knife for finding any resource in your AWS account. ⏬ instal

Jun 4, 2022

Run a command, watch the filesystem, stop the process on file change and then run the command again...

hubmon Run a command, watch the filesystem, stop the process on file change and then run the command again... Install You can install this command lin

Jul 30, 2022

A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience!

Oily A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience! Installation · Usage · Examples · Discord Installation Once yo

Dec 19, 2022

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

Oct 25, 2022

Boilerplate for HTML, CSS, JS and TailwindCSS

tailwind-vanillajs-boilerplate 🔨 Boilerplate for HTML, CSS, JS and TailwindCSS

Aug 10, 2022

A Nextjs-Typescript boilerplate , configured with Tailwindcss, Eslint, Prettier, Lint-staged ,Husky and commitizen

Minimal Nextjs Typescript boilerplate A Minimal Next-Typescript boilerplate to quickly and easily bootstrap your next project. Comes pre-configured wi

Nov 4, 2022

React Native Boilerplate - The Boilerplate contains all the basic packages, common components and, prebuilt code architecture

 React Native Boilerplate - The Boilerplate contains all the basic packages, common components and, prebuilt code architecture

The Boilerplate contains all the basic packages, common components and, prebuilt code architecture. It will save developer's project setup time.

Dec 26, 2022

Lit + File Based Routing + Nested Layouts

Lit File Based Routing Lit router for nested layouts and file based routing. Similar to https://remix.run/ but at client side. Demo Package Archived i

Jan 14, 2022

A tiny foundation that providing nested state-based routing for complex web application.

StateMan stateman: A tiny foundation that provides nested state-based routing for complex web applications. stateman is highly inspired by ui-router;

Dec 20, 2022

Declarative routing for React

React Router Declarative routing for React Docs View the docs here Migrating from 2.x/3.x? 3.x docs 2.x docs Packages This repository is a monorepo th

Jan 9, 2023

Fastify boilerplate with Vite & Vitest

Fastify boilerplate with Vite & Vitest Enhance your Fastify DX with the power of Vite & Vitest. Features ⚡ All the power of Vite (Next Generation Fron

Dec 13, 2022

Vite Electron Builder Boilerplate

This is template for secure electron applications. Written following the latest safety requirements, recommendations and best practices.

Dec 15, 2022

Modern ThreeJS boilerplate powered by Vite & Typescript

Modern ThreeJS boilerplate powered by Vite & Typescript

Modern ThreeJS ⚡️ Modern ThreeJS boilerplate powered by Vite & Typescript. Features Powered with Vite 📦 GUI controls using Tweakpane 🎛 Typescript 🦾

Jan 4, 2023

⚡️ Vite + SolidJS + Electron boilerplate.

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration template. Contains only the basic dependencies. The extension is very fle

Dec 18, 2022

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod Intro This boilerplate is made for creating chrome extensions

Dec 27, 2022

Chrome Extension boilerplate with SolidJS + Vite + CRXJS

SolidJS Chrome Extension boilerplate An easy way to create Chrome extensions with SolidJS using Vite + CRXJS. Features For more functionality, check o

Dec 25, 2022

This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

Awesome Template Stitches — NextJS, TypeScript, Stitches and Design Tokens Summary About this template Avaliale scripts Other scripts available Main t

Dec 29, 2022

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + HMR

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + HMR

mv3-solid-chrome-extension-template chrome-extension development template with firebase Support Chrome Extension Manifest V3 SolidJS Typescript HMR Fi

Dec 13, 2022
Owner
Chris Dzoba
Chris Dzoba
A declarative, HTML-based language that makes building web apps fun

A declarative, HTML-based language that makes building web apps fun ?? Docs ∙ Try Online ∙ Contribute ∙ Get Support Intro Marko is HTML re-imagined as

Marko 12k Jan 3, 2023
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
JCore.FileSystem - File system API based on Node.js

JCore.FileSystem Table of Contents JCore.FileSystem Table of Contents Introduction Installation Uninstall Exposed API Network File Release Package Int

Sniper Code 1 Jan 21, 2022
Vite-plugin-web-extension - A vite plugin for generating cross browser platform, ES module based web extensions.

vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Support Compl

Ruben Medina 81 Dec 31, 2022
Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse

Vite Vue SSR Starter Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse Features ⚡️ Vue 3, Vite 2, TypeScript ?? Domain-Driv

Oleg Koval 10 Aug 2, 2022
Chrome-extension-react-boilerplate - Simple Chrome extension React boilerplate.

Simple Chrome extension React boilerplate This is a simple chrome extension boilerplate made in React to use as a default structure for your future pr

Younes 6 May 25, 2022
In-memory filesystem with Node's API

In-memory filesystem with Node's API

Vadim Dalecky 1.4k Jan 4, 2023