Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pankod/superplate

A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/
https://github.com/pankod/superplate

best-practices boilerplate cli nextjs npx react reactjs typescript

Last synced: 10 days ago
JSON representation

A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/

Awesome Lists containing this project

README 

        




superplate example








A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. 


superplate creates ready-to-develop projects for React and Next.js and refine.











[![Meercode CI Score](https://meercode.io/badge/pankod/superplate?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)

[![Meercode CI Success Rate](https://meercode.io/badge/pankod/superplate?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)

[![Maintainability](https://api.codeclimate.com/v1/badges/eb4b5a8f88b6e511e61d/maintainability)](https://codeclimate.com/github/pankod/superplate/maintainability)

[![npm version](https://img.shields.io/npm/v/superplate-cli.svg)](https://www.npmjs.com/package/superplate-cli)

[![npm](https://img.shields.io/npm/dy/superplate-cli)](https://www.npmjs.com/package/superplate-cli)








  Created by Pankod








## About 



**superplate** lets you start rock-solid, production-ready _React_, _Next.JS_ and _refine_ projects just in seconds. The command-line interface guides the user through setup and no additional build configurations are required.



Superplate ships with +30 plugins including popular UI Kits, testing frameworks and many useful developer tools.



## Quick Start



To use superplate, make sure you have _npx_ is installed on your system (npx is shipped by default since npm 5.2.0).



To create a new app without using presets, run the following command:



```bash

npx superplate-cli my-project

```



You will be prompted with plugin options to create your project. A full list of avaiable plugins is here: [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).



## Available Integrations



### Next.js 



 



  









**superplate**  makes it easier to get up and running with a well-structured Next.js and TypeScript application.



To get started quickly, please run the following command. The CLI wizard will assist you for the rest of the setup process:



```

npx superplate-cli -p nextjs my-project

```



### React.js 



 



  










**superplate**  makes it easier to get up and running with a well-structured Create React App and TypeScript application.



To get started quickly, please run the following command. The CLI wizard will assist you for the rest of the setup process:



```

npx superplate-cli -p react my-project

```



### refine ⚡

[refine](https://github.com/pankod/refine) is an open source React framework for building **CRUD** apps rapidly.



**superplate** provides built-in templates for CRA, Next.js and Remix environments so you can bootstrap a **refine** project in a couple of minutes. 



[Refer to refine repository for more information ➡️ ](https://github.com/pankod/refine)









  

  how-works-refine













To get started quickly, please run the following command. The CLI wizard will assist you for the rest of the setup process:



```

npx superplate-cli -p refine my-project

```







## Coming Soon



We are planning to add the following frameworks integrations soon.  





  








## Documentation



For more detailed information and usage, you may refer to our [documentation pages](https://pankod.github.io/superplate/).



## Philosophy



-   It provides an easy starting to your project by leveraging industry-standard best practices and and performance oriented tools.

-   Fully extensible due its plugin based architechture.

-   Code examples are added to plugin documents to show how best practices are implemented.



## Plugins



superplate uses a plugin-based architecture. Basically, plugins are created from popular npm tools with configuration files. You can check them out in [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).



The default core plugins determined by Pankod team. Feel free to send PR or open an issue for new plugins you want to add.



### Using a custom source of plugins



You can use different sources for plugins other than [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).



Simply add `--source ` option to use **superplate** with a custom source.



To learn more about sources and how to create your own; please check out [documentation](https://pankod.github.io/superplate/docs/development/how-it-works/#creating-a-source-repository)



### Creating a plugin



**superplate** gives you many abilities to create your own plugin and interact with the others. To learn more on creating a plugin, please check out [documentation](https://pankod.github.io/superplate/docs/development/creating-a-plugin)



## Available plugins






## CLI options



```

> npx superplate-cli --help

Usage: superplate [options]



Options:

 -v, --version                   prints version number

 -h, --help                      prints help information on all commands and options

 -d, --debug                     prints additional logs

 -s, --source    Use this option to target a custom source of plugins

                                 Source path can be a remote git repository or a local path.

 -p, --project     In sources with multiple types, you can use this option to preset the type.

 -b, --branch       If your source is a git repository, you can define a custom branch for `superplate` to use.

 -o, --preset       If your source includes presets, you can select one of them to prefill the answers.

 -l, --lucky                     You can select random choices with this option, if you are feeling lucky.

```



## Development mode commands



Watches for changes in the code; builds the project and then globally installs superplate for testing.



```

npm run dev:global

```



Create a build inside `/lib` directory.



```

npm run build:cli

```



Install the current build globally:



```

npm run global

```



## Contribution



If you have a bug to report, do not hesitate to file an issue.



If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.



## License



Licensed under the MIT License, Copyright © 2021-present Pankod