A Minimal Setup & Fast Boilerplate for React.js with Vite
reactplate
A Minimal Setup & Fast Boilerplate for React.js with Vite.
eatures
- 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
create-reactplate-app
npx create-reactplate-app blog-starter
cd blog-starter
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
Development
For further development and contributions, please follow the installation instructions below.
git clone https://github.com/fauzan121002/reactplate.git
# Reactplate CRA cli scope
cd reactplate
#----------------------------------
# Reactplate app scope
cd reactplate/examples
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
...