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

Last update: Oct 25, 2022

Overview

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

License

Reactplate using the MIT License

Credits

Credits to React.js and Vite teams for their awesome open source and resources!

boilerplate for react-firebase app

Goal of the project Everytime there is an idea about web app side project, significant amount time is spent on building boilerplate code. Especially g

Dec 8, 2022

React/Express/Webpack Boilerplate

React Boilerplate The following repo contains a very basic setup git clone https://github.com/asieke/React-Express-Boilerplate.git cd React-Express-Bo

Dec 30, 2022

Boilerplate to get started building React-based interfaces for Crestron using CH5

Getting Started with Crestron UI This project was bootstrapped with Create React App. Example component communicating with the Crestron-CH5 library: i

Apr 25, 2022

A boilerplate for kickstarting my projects with Django backend and React front-end

Django-React-Boilerplate This is a boilerplate for kickstarting my projects with Django backend and React front-end. (AND, PostgreSQL) as the database

Apr 14, 2022

This project is a React Native Boilerplate that can be used to kickstart a mobile app.

Meta Point People: Mounir Dhahri This is an Artsy OSS project. Don't know what Artsy is? Check out this overview and more, or read our objc.io on team

Jul 6, 2022

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Jan 8, 2023

Comments

Configure Eslint and Prettier with Pre Commit Hook.
I think this will work correctly, test it and let me know if it works as expected or not. Note: you can custom your Eslint and Prettier Rules as you want by modifying configuration files.

Closes #9

Description

Configure Eslint and Prettier with Pre Commit Hook to fix and format files recursively.

Tasks

[x] Configure eslint

[x] Configure prettier

[x] Add pre commit hook with husky
opened by YoussefMahmod 1
Configure Eslint and Prettier with Pre Commit Hook
Description

Configure Eslint and Prettier with Pre Commit Hook to fix and format files recursively.

Tasks

[x] Configure eslint

[x] Configure prettier

[x] Add pre commit hook with husky

documentation enhancement good first issue
opened by fzn0x 0
Typescript support
This is a great alternative to CRA; will you be adding Typescript support (please):

CRA supports it like this :

npx create-react-app my-app --template typescript
enhancement help wanted good first issue
opened by johnoscott 1