Skip to main content

Getting started

Overview#

No need to install or configure any tools for starting a new single-page application project. superplate handles everything so that you can focus on the code.

superplate offers a full system build setup with no configuration for best JavaScript UI framework single-page applications. It provides 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.

note

For now, superplate creates a boilerplate for only React and Next.js apps. Other frameworks integrations will be added soon.

Quick Start#

Make sure you have npx installed (npx is shipped by default since npm 5.2.0) or npm v6.1 or yarn.

npx superplate-cli <my-project>

It will ask you some questions about what features and tools you want to add to your project. 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

Open http://localhost:3000/ to see created app.

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

Plugins can be included as part of your project creation phase. 37+ plugins working in harmony with superplate UI Framework boilerplates.

See the list of core-plugins.

info

Plugins are customizable and extendable. You can develop your own plugin or modify existings.
Refer to documentation to see how plugin works →

tip

Don't be sad if you missed feature plugins to add during project creation phase. We added explation about how to add plugin features to existing project.

Scripts#

Some built-in commands that you'll use inside the created project:

Run the app in development#

npm run dev

Build the app for production#

npm run build

The following scripts can be use if the selected plugins during project creation process are like shown below#

Runs testing frameworks: Jest, Enzyme, Testing Library.#

npm run test

E2E Testing frameworks: Cypress, WebdriverIO#

npm run cypress:runnpm run webdriver:run

Apollo GraphQL or graphql-request tools:#

npm run apollo:sync

Launch Storybook#

npm run storybook

Build Storybook#

npm run build-storybook

SVGR: Produce component from SVGR#

npm run svgr

Bundle Analyzer: Produce bundle map#

npm run build:analyze