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

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

Reactplate will be number {rank}
; } ">
// 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!

Issues
  • Unit Testing

    Unit Testing

    Implement Unit Testing for Reactplate Example Components.

    enhancement help wanted 
    opened by fncolon 1
  • Mobile Responsive

    Mobile Responsive

    enhancement 
    opened by fncolon 1
  • Configure Eslint and Prettier with Pre Commit Hook.

    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
  • UI Improvements

    UI Improvements

    UI Improvements :

    • navbar
    • styling input n button
    • footer
    enhancement 
    opened by fncolon 0
  • Template Generator

    Template Generator

    enhancement 
    opened by fncolon 0
  • style(home): change navbar, logo, and form styling

    style(home): change navbar, logo, and form styling

    • Change font to 'Nunito'
    • Change navbar menu color and active color
    • Input and button styling
    • Logo changed

    This PR related to #1

    enhancement 
    opened by zuramai 0
  • Template Generator

    Template Generator

    some patches is the test result on npx. and removed support on zx.

    enhancement 
    opened by fncolon 0
  • Add Template Generator Support For Windows

    Add Template Generator Support For Windows

    Currently Template Generator Only Support UNIX Systems.

    enhancement 
    opened by fncolon 0
  • Template Generator Windows Support

    Template Generator Windows Support

    settle Template Generator Windows #6

    enhancement 
    opened by fncolon 0
  • Configure Eslint and Prettier with Pre Commit Hook

    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 fncolon 0
  • Add PWA Support

    Add PWA Support

    Add PWA Support using vite and vite-plugin-pwa

    enhancement 
    opened by fncolon 0
  • Typescript support

    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
Releases(0.0.3)
Owner
Muhammad Fauzan
18y.o software developer, Fn or F Lock provide two sets of commands for many keys. Meanwhile fncolon provides many good open sources for many developers.
Muhammad Fauzan
🚀 A Vite Typescript SSR React boilerplate!

A blazingly modern web development stack. This template repo tries to achieve the minimum viable example for each of the following:

JonLuca De Caro 120 Sep 22, 2021
Just want to try react, vite and twin.macro

React + Vite + twin.macro Getting Started Clone this repository git clone https://github.com/hendraaagil/react-vite-twin-macro.git Go to project direc

Hendra Agil Syaputra 9 Sep 7, 2021
A boilerplate generator for VR2T → Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

Josh Daniel 6 Sep 17, 2021
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

Muhammad Fauzan 22 Sep 15, 2021
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

Muhammad Fauzan 22 Sep 15, 2021
ReactJS + Vite boilerplate to be used with Tailwindcss.

React Tailwindcss Boilerplate build with Vite This is a ReactJS + Vite boilerplate to be used with Tailwindcss.

João Paulo Moraes 16 Sep 23, 2021
Free React Admin Dashboard made with Material UI components and React.

Minimal UI (Free version) Free React Admin Dashboard made with Material UI components and React. Minimal Kit FREE Minimal Kit PRO 7 Demo Pages 40 demo

null 316 Sep 18, 2021
💨 A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

Josh Daniel 4 Sep 22, 2021
VRT starter (Vite, React, Tailwind CSS)

VRT-Starter (vite, react, tailwindcss) The most lightweight, vanilla template for React, Vite, & Tailwind CSS. It's designed to save you a couple minu

Mitchell Johnson 4 Aug 19, 2021
A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

itzmono-vite A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps ?? Batteries Included ⚡ Vite 2 ??️ TypeScript ?? React ?

Hidekazu Kobayashi 6 Sep 21, 2021
Create-React-App + TypeScript + Ant-Design (without Eject)

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

#кодеротбога 111 Sep 13, 2021
⚡ A boilerplate for Vite.js, React.js. Emotion.sh, & TypeScript.

Vret Boilerplate ⚡ Vret stands for Vite, React, Emotion, TypeScript. It's fast & faster than create-react-app! ??‍♂️ Installation Choose an option: Do

Josh Daniel 5 Aug 30, 2021
Postgres, Express, React, Node - Stack Boilerplate

PERN Boilerplate ?? WORK IN PROGRESS ?? upcoming features: Email confirmation Socials Login Features GraphQL Server JWT Authentication Auto refresh ac

Prince Carlo Juguilon 10 Sep 12, 2021
🐦 Modern JavaScript Development Ecosystem

Roc Build JavaScript projects easily using modern libraries. Quickly create products powered by libraries like Koa, React and Redux ready for deployme

Roc 430 Sep 1, 2021
Boilerplate to build Cross-Platform Apps with Expo and React Native

Boilerplate to build Cross-Platform Apps with Expo and React Native

José Ferrer 16 Sep 14, 2021
A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript with Styling reset.

VRST Boilerplate ⚡ Vrst stands for Vite, React, Styed-Components, TypeScript. It's fast & faster than create-react-app! ??‍♂️ Installation Choose an o

Zomer Gregorio 6 Sep 5, 2021
vite 配置react+typescript 项目模版,有配套博客教程

启动 依赖安装:yarn 本地启动项目:yarn dev 要登陆需要运行:yarn mock 不然无法登陆 本项目按照文档先行,同时会在 B 站进行视频直播 关注公众号"前端要努力",获取博主微信(lisawhy0706)进入群聊及时获取直播信息 系列文章 vite + react + ts 手摸手

null 54 Sep 15, 2021
快速创建 React + Vite 应用, 并且你可以定制你的应用.

Create React App 快速创建 React + Vite 应用, 并且你可以定制你的应用.

ykfe 80 Sep 8, 2021
Yet another boilerplate for TypeScript and React developers.

boilerplate-2021 Yet another boilerplate for TypeScript and React developers. 中文介绍 Demo https://magiccube.github.io/boilerplate-2021/ Usage Since this

Henry Li 21 Sep 16, 2021