Introduction

The Turbo 360 platform is the fastest, easiest environment for creating and deploying full stack Node/Express sites. Our collection of tools and code templates abstract away repetitive tasks and infrastructure concerns (such as scaling and SSL integration) so you can focus on creating great projects for your job, clients and for yourself.

Installation

Make sure your machine runs an up-to-date version of Node JS. Then install the necessary libraries globally to run the Turbo build commands (NOTE - "sudo" is not necessary on Windows environments):

$ sudo npm install webpack -g
$ sudo npm install gulp -g
$ sudo npm install webpack-cli -g


Next, install the Turbo CLI:

$ sudo npm install turbo-cli -g

Confirm Turbo Installation:

In order to confirm that your Turbo installation was successful, run the following command:

$ turbo version 
Your terminal should output the following:
>> 0.34.89 

As of September 19, 2019, Turbo is at version 0.34.89.

Creating Projects

Scaffolding

To scaffold a new project, open your terminal and type the following:

$ turbo new <PROJECT_NAME>


Next, change directory into the project and install dependencies:

$ cd <PROJECT_NAME>
$ npm install


This scaffolds a base Node/Express application with configuration settings for the Turbo hosting environment. The base project is "opinionated" in that a handful of options are pre-set such as:

  • "public" folder for static assets
  • "views" folder for templates
  • "routes" folder for request/response routing
  • Mustache templating engine

These settings can be changed and the initial scaffold serves as a "starting" point for a project right out of the box.


Run the devsever

$ turbo devserver
then navigate to http://localhost:3000 which should show the following:

Turbo 360

To turn off the devsever: CONTROL + C

Staging Environment

To connect your local source code to a the Turbo 360 staging environment, create a project in your Turbo dashboard by filling out the area shown below and click "CREATE SITE":

Turbo 360 Admin User Interface

Back in the terminal, login to your Turbo account using the CLI:

$ turbo login

Then from the root directory of your project, connect your local source code the project on Turbo:

$ turbo connect

This will prompt you to enter the SITE ID and API KEY for your project. Head back to the Turbo 360 dashboard and on your site admin console, find those two values in the area shown below:

Turbo 360 Admin User Interface

Finally, deploy your site:

$ turbo deploy

When the deployment is complete, a staging link will be provided in your terminal. Copy & paste that link in your browser and you should see the same home page from earlier but now on a live staging server!

Turbo 360 Admin User Interface

Project Structure

The Turbo project structure closely follows the patterns and conventions of a Node & Express architecture. View templates are stored in the /views directory and route logic is under the /routes folder.

Turbo 360 Default Project Folders and Files Structure

Routes

The route files determine how your app responds to incoming requests. Routes can render plain text, JSON, a view template or redirect the request to another url. Route files are stored in the ROUTES directory and connect in the app.js file of the root level like so:

FILE: app.js
In this snippet, the route files are imported on lines 33-34 and connected on lines 37-38. A sample API route rendering JSON is shown below:

FILE: routes/api.js


Views

View templates are rendered using Mustache templating. The following code renders a template called "about.mustache" from the index route:

FILE: routes/index.js

In line 7, 'about' refers to the mustache template about.mustache in the /views directory. The JSON object passed in the next argument, {text: 'This is about page'} provides a source of dnyamic data that can be rendered in the template. To do so, the the template itself should contain placeholders to render the data like so:

FILE: views/about.mustache

In this example, the dyanmic text is rendered in line 12 and when loaded into a browser, looks like this:

Turbo 360

Static Assets

Static assets (images, pdf, js, css, etc) are stored in the Public directory. When linking to static assets in templates, the 'public' directory is implicit.

For example, the following tags should be configured as follows:
BAD: <img src="/public/images/example.jpg" />
GOOD: <img src="/images/example.jpg" />

BAD: <link rel="stylesheet" href="/public/dist/css/bootstrap.min.css">
GOOD: <link rel="stylesheet" href="/dist/css/bootstrap.min.css">


Config Object

Turbo 360 provides you with the opportunity to customize your project site's config options.
FILE: app.js

  • views: Allows the user to customize which directory to reference when accessing project views.
  • static: Allows the user to customize which directory to reference when accessing the project's static files.
  • db: Allows the user to set their prefered database configuration.

Note: Currently, Turbo only supports MongoDB as a database configuration.

Extensions

A Turbo 360 project can also be "extended" with configurations that add more functionality "out-of-the-box." For exmample, you can add a React with Redux integration to your Turbo site with the following command (from root directory):

$ turbo extend react

This adds a React with Redux base project onto your app including the required packages in the package.json file. It also installs the new packages and runs the build script in order to ensure the source compiles properly. The React and Redux source code is located under the /src directory in the root level of the project. A webpack config file is also provided in the root level and the index.mustache file under the /views directory is where the compiled React source is mounted. Turbo 360 React Default Project Files and Folder Structure

Turbo 360 projects support the following extensions to speed up your development flow:

  1. $ turbo extend gulp

    Adds a gulpfile.js with basic configuration for CSS and JS concatenation and minification.

  2. $ turbo extend react

    Adds a React with Redux codebase under the "src" directory and updates package.json with corresponding dependencies. Also include webpack.config.js file with basic loaders and scripts installed.

  3. $ turbo extend graphql

    Adds a GraphQL endpoint on the server with corresponding route. The endpoint is NOT connected and has to be manually imported in the "app.js" file in order to handle requests.

* if you have a request for an extension, please email Dan at dkwon@turbo360.co

Cloning Projects

In addition to scaffolding projects from scratch with the Turbo CLI, you can clone projects by directly downloading source code, then connected the project to an environment on your account and redeploying.

Download

To begin, navigate to the Gallery page (https://www.turbo360.co/gallery) and select a project to download. Click the "Download Source" button as shown in the image below:

This will download a ZIP file called "package.zip" which contains the source of the selected project as constituted on the current deployment. Unzip the file and remove the "node_modules" folder. Then open your terminal and change directory into the root of the project and reinstall the dependencies:

$ npm install

When the dependencies are installed, run the dev server and navigate to http://localhost:3000:

$ turbo devserver

This should show the same site now running locally on your machine.

Clone Environment

In order to deploy the project on to your Turbo account, the environment from the original site needs to be cloned to your account. To do so, navigate to your account page on Turbo and select the "Downloaded" option on the left-side menu bar:

Select the site that the project was originally downloaded from and click the "Clone Environment" button:

This will prompt you to enter a name for the environment. Enter a name then click the "CLONE ENVIRONMENT" button. This will create a new site with the same configuration as the original site that your project was downloaded from.

Deploy

The deployment process is the same for any other Turbo 360 site. First, we connect our local source code to the staging environment by navigating to the root directory of the project and entering the following command:

$ turbo connect
Then follow the instructions for deployment from HERE.

Vertex Templates

Vertex 360 is a complementary platform in which Turbo projects are augmented with visual editing tools as well as a robust CMS system. Several templates on Turbo 360 are formatted for the Vertex management console which are divided into the following areas:

  1. Page Configuration
  2. Global Configuration
  3. File Storage
  4. Content Management System

Vertex templates are indicated by the green stripe show in the screenshot below. By cloning a Vertex compatible template and redploying it on your environment, you gain access to the editing tools and features above.

Contact

If you have any questions, comments or feedback, feel free to contact us at matthew@turbo360.co