haili042 / pri

Framework for React applications and components.

Pri ·

Pri is a toolkit for building web applications with React. Helps you deal with everything with develop, so you can focus on the business logic.

Features

Pri can help you develop project and component.

• 🌱 Auto router. File-based routing out of the box.
• 📝 Mdx support. Write markdown page easily, just create a file using .md or .mdx as suffixes.
• 🎉 Static export. Very easy to deploy to github pages.
• 🔢 Mocks. Using service worker to mock request!
• 📄 WebUI. You can create page, or config files by click button in webui!
• 🚀 Dynamic Import. Automatic page level dynamic routing.
• 🔥 Typescript. 100% typescript source code, for project maintainability considerations, only TS projects are supported!
• 🛏️ Configuration file auto creator. Never worry about configuration files and updates of configuration files. This is automatic.
• 🚄 Auto dll. Speed up hot loader.
• 🔌 Pluginable. 20+ built-in plugins, and more community plug-ins.
• 0️⃣ Zero-config.

see Docs

Using pri

Pri is used as a npm package installed in your project.

# 1. Create an empty folder, install pri locally.
$ npm i pri --save # /workspace/my-empty-folder

# 2. Init project files, and you will have following npm scripts.
$ npx pri init # Choose project or component.

# Start dev server
$ npm start

# Start docs server
$ npm run docs

# Build
$ npm run build

# Test
$ npm test

Read more npm scripts.

# Preview of production environment
$ npm run preview

# See bundle size analyse
$ npm run analyse

# Bundle to one file
$ npm run bundle

# Format all sources code
$ npm run format

Using pri plugin

Installing the pri plugin into the project will take effect.

For example, using pri-plugin-dob:

npm i pri-plugin-dob --save

# Now all plugin works
npm start

File Structure

Project:

.
├── .temp                     # Gitignored. Temporary file folder.
├── coverage                  # Gitignored. Code coverage folder.
├── dist                      # Gitignored. Dist folder, auto generated by `npm run build`.
├── tests                     # Tests folder.
├── src                       # Source files folder.
│   ├── pages                 # Page files.
│   ├── layouts               # Layout files.
│   ├── components            # Component files.
│   └── utils                 # Util files.
│── priconfig.json            # Config file.
└── ...other-files            # Auto generated by `npx pri init`.

Component:

.
├── .temp                     # Gitignored. Temporary file folder.
├── coverage                  # Gitignored. Code coverage folder.
├── dist                      # Gitignored. Dist folder, auto generated by `npm run build`.
├── tests                     # Tests folder.
├── src                       # Source files folder. Anything here.
│── priconfig.json            # Config file.
└── ...other-files            # Auto generated by `npx pri init`.

Inspired

• next.js
• umi
• rekit

Q&A

Using in windows

fedora. Using windows subsystem for Linux.

Migrate from 0.x/1.x to 2.x

Two steps:

1. Run npx pri-migrate-one-to-two in your project root path.
2. Reinstall node_modules.