Fullstack CLI to create a SPA with React and an API with Hapi.





GitHub Stars



Last Commit

2yrs ago








Type Definitions






semantic-release Commitizen friendly

Build Status codecov Codacy Badge


This is a tool for Fullstack Developers, to create the full stack for a web application. This stack contains:

  • Front: Generator that creates a web application based on React that uses:
  • Back: Generator that creates a backend based in Node.js that uses:
  • GraphiQL: Generator that creates a web application to manage our backend based on GraphQL.
  • Catalog: Generator that creates a development environment to create a React component catalog.


To install the tool:

npm install -g fullstack-cli

And to create a new project:


And follow the instructions on the screen.


Fullstack-CLI uses a simple form structure that asks the user to configure the project throw a bunch of steps using inquirer.js.


We are using WebPack as a development environment, and NPM scripts to automatize the process.

After introducing the project name, the options that offer the creation wizard are:

  • Websockets: If you need WebSockets, install them selecting this option. This creates an connection using socket-io-client in the index.jsx file and listen to connections from the WebSockets in the backend.

  • Material-UI: If you want to add a CSS framework to your project, I have chosen Material-UI. It is a great framework based on Google's Material Design and has a lot of great tools and components. Of course, you can omit this step and add your own styles or preferred framework (Semantic UI React is another great framework to work with).

  • Redux: Here you can decide to install Redux in your application. Redux is an amazing tool that keeps your application state. It's hard to understand the data flow inside a modern web application without this kind of tools nowadays.

  • Routes: If you are going to make something complex with more that one page, this is your module. It uses react-router to create a simple structure of a few routes behind a login. Be careful because we are using the fourth version, and it breaks totally from previous ones.

After this steps, we ask for basic information to create the package.json of the application.

Then, the packages are installed, and a few instructions appear to let you know how to start developing your new platform.

Not choosing any packages during the creation process, creates the simplest React application you can have, just to start building from scratch.


The backend wizard starts more or less in the same way. It asks for the project's name.

After that, it follows this steps:

  • Databases: First of all, the wizard asks you which databases needs your back to connect to, in order to install the basic connector structure for each one. Right now, we offer connections for MongoDB (that also add a GraphQL layer if needed), MySQL and PostgreSQL. You can install all of them if needed.

  • Websockets: If you are going to use WebSockets, this option installs and configures a WebSocket endpoint using Socket.io. It just listens for connections and ads a listener for isAlive message for testing purpose.

  • GraphQL: If you have selected MongoDB as the database, you can also configure an endpoint for GraphQL, and amazing database concept created by Facebook. The main idea is to allow the client to ask for the data needed instead of having thematic endpoints. This allows us to filter the info in the server, and send smaller packages with only the needed data.

Then, the packages are installed, and a few instructions appear to let you know how to start developing your new platform.

The chosen framework for the back is Hapi (using Good as logger tool, in this case, only through the console).

The tool for the API description is Swagger (using hapi-swagger).

The security is based in JWT (using hapi-auth-bearer-token).

The project is based on plain Node.js (no transpilers), so we are still using CommonJS import method using require instead of import.

To configure each database connection, there are configuration files inside the config folder. The API will try to connect to your databases, so if you don't configure the connection properly, it will throw an error.


The catalog creates an application based in Styleguidist. This tool allows us to develop components isolated from our main application.

Semantic Release

Rate & Review

Great Documentation0
Easy to Use0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Unwelcoming Community0
No reviews found
Be the first to rate


No alternatives found


No tutorials found
Add a tutorial