reactplate
v0.0.3
Published
Minimal Setup & Fast Boilerplate for React.js with Vite
Downloads
1
Readme
Features
🚀 Dynamic Pages Routing with react-router-dom from React.js 🚀 Fast development with Vite 🚀 SSR support with Vite 🚀 PWA support with Vite 🚀 SSG support with Vite
Installation
git clone https://github.com/fauzan121002/reactplate.git
cd reactplate
npm install
# run server (development mode)
npm run dev
# run server (production mode)
npm run serve
# run debugger
npm run debug
# build the client side & the server side project
npm run build
# build the client side project
npm run build:client
# build the server side project
npm run build:server
# static site generate
npm run generate
Built-in Configuration
Import Aliases
@
equals to_ROOT_/src
#
equals to_ROOT_/src/components
%
equals to_ROOT_/src/assets
ESBuild
ESBuild already injects import React from 'react';
for any .jsx files so you don't need to import it again.
Dynamic Pages Routing
Reactplate Dynamic Pages Routing folder structure works like Next.js.
pages
│ Home.jsx
│ About.jsx
│
└───Rank
│ │ [rank].jsx
│ └───subfolder1
│ │ [others].jsx
│ │ ...
Using the params example
// Rank/[rank].jsx
import { useParams } from "react-router-dom";
export default function rank() {
const { rank } = useParams();
return <div>Reactplate will be number {rank}</div>;
}
Note : Index page will refer to Home.jsx
URL Convertion
Reactplate will convert any jsx files filename with PascalCase or camelCase to kebab-case.
Example :
pages
│ Home.jsx
│ AboutMe.jsx
│
└───myRank
│ │ [rank].jsx
│ └───subfolder1
│ │ [others].jsx
│ │ ...
will be converted to :
/home
/about-me
/my-rank/:rank
/my-rank/:rank/subfolder1/:others
...
License
Reactplate using the MIT License
Credits
Credits to React.js and Vite teams for their awesome open source and resources!