reactplate

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

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

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
...

GitHub

https://github.com/fncolon/reactplate