Code Monkey home page Code Monkey logo

davidgonvis / superplate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pankod/superplate

1.0 0.0 0.0 7.8 MB

A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js. https://pankod.github.io/superplate/

Home Page: https://pankod.github.io/superplate/

TypeScript 96.01% JavaScript 0.34% HTML 3.65%

superplate's Introduction


A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js.

Superplate - The frontend boilerplate with superpowers | Product Hunt

Meercode CI Score Meercode CI Success Rate Maintainability npm version dependencies Status dev-dependencies Status

npm


Created by Pankod

About

superplate has been developed to create rock solid UI frameworks apps boilerplate with no build configurations in seconds.

You can add usefull, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase.

To learn on how superplate and its plugins work, you can check out our documentation.

For now, superplate only creates project for Create React App and Next.js apps as a default Framework option. Other frameworks will be added soon.

Available Integrations



Coming Soon



Documentation

For more detailed information and usage, refer to the superplate documentation.

Quick Start

To create a new app run the command:

npx superplate-cli <my-project>

Make sure you have npx installed (npx is shipped by default since npm 5.2.0)

You will be prompted with plugin options to create your project without spending hours on configurations. To find out more about Next.js plugins see the superplate-core-plugins and React plugins see the superplate-react-core-plugins

superplate example

Once all questions are answered, it will install all plugins and the dependencies. Then navigate to the project folder and launch it:

npm run dev

Use the dev command when running application in development mode.

Philosophy

  • It provides a easy starting to your project in seconds with using industry-standard best practices and performance oriented tools & libraries.
  • You can easily develop your own framework CLI and plugins according to your needs to on top of superplate codebase due to its framework/plugin agnostic nature.
  • Code examples are added to plugin documents to show how best practices are implementing.

Next.js Integration

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

Next.js is a minimalistic React framework that runs on the browser and the server with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. It offers developers an easy way to get started, build server-side rendering and static web applications using React.

React Integration

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

Plugins

superplate uses a plugin-based architecture. Basically, plugins are created from highly-demanded npm tools in the front-end ecosystem with configuration files.

The features and tools listed during the project creation process are implemented as plugins.

You can check them out in superplate-core-plugins and superplate-react-core-plugins.

The default core plugins determined by Pankod team uses on a day-to-day basis to build apps. 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.

Simply add --source <path-to-source> option to use superplate with a custom source.

To learn more about sources and how to create your own; please check out documentation

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

Avaliable 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 <path-to-source>   Use this option to target a custom source of plugins
                                 Source path can be a remote git repository or a local path.

Development mode commands

Watch for changes in the code; build the project and then globally install the 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

superplate's People

Contributors

omeraplak avatar burcukaragozzz avatar aliemir avatar mhrrmk avatar yildirayunlu avatar necatiozmen avatar umutzd avatar

Stargazers

David Galvis avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.