Fullstack-CLI

Introduction

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:
  • Routing
  • Redux
  • Websockets
  • Material UI
  • GraphQL
• Back: Generator that creates a backend based in Node.js that uses:
  • Hapi
  • Websockets
  • GraphQL
  • Multiple databases handlers.
    • MongoDB
    • MySQL
    • PostgreSQL
• 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.

Installation

To install the tool:

npm install -g fullstack-cli

And to create a new project:

fullstack-cli

And follow the instructions on the screen.

Technology

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

Frontend

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.

Backend

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.

  • For MongoDB we are going to use Mongoose as ODM.
  • For MySQL we are going o use mysqljs.
  • For PostgreSQL we are going o use node-postgres.

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

Catalog

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

Useful Links

Semantic Release