Skip to main content
Git Interface

Node.js

This tutorial will get your Node.js app running on Section's edge compute platform.

At the end of this tutorial you will have:

  • A website running as a subdomain at section.dev
  • Free and automatically renewing SSL certificates for your website
  • Used the sectionctl CLI tool to deploy changes to your app

Let's start by setting up sectionctl, the Section CLI tool

Download and install sectionctl​

Linux
Windows
MacOS
Install the package from Homebrew

brew tap section/brews

brew install sectionctl

tip

For other operating systems or processors: download the latest release of sectionctl for your platform.

Configure authentication​

To set up credentials so the CLI tool works, run:

sectionctl login

This will prompt you for your Section API token, and securely store them where sectionctl can find them. To provision an API token, see these docs.

The Section CLI is now configured and ready to use, next we will set up a Node.js app.

Set up an example Node.js app​

Prerequisites​

If you don’t have Node.js installed, install it from here. You need Node.js version 10.14 or later.

tip

App and account IDs can be found with the sectionctl apps list command.

Generic Instructions​

My App is Static
mkdir first-section-app; cd first-section-app

npm init -y

The next command adds scripts to aid in deployment/compilation and installs serve, which is recommended to host a static site.

By default we check for files in a folder called "build/" and serve them statically.

npx "@section.io/sectionctl-helper" static build/ -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Congratulations! You should now have an application that is ready to be deployed on Section.

An app is static if it uses compiled, prebuilt, or bundled HTML, CSS, and JavaScript. Static sites use portable assets that can be run on any web server.

My App is Dynamic
mkdir first-section-app; cd first-section-app

npm init -y

npx "@section.io/sectionctl-helper" scripts -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

You will need to add a start script to your package.json to the entry point for your server.

Congratulations! You should now have an application that is ready to be deployed on Section.
An app is dynamic if it runs its own webserver. Dynamic sites may render web pages server-side or process information on the server.

Framework Examples​

Express JS​

mkdir first-section-app; cd first-section-app

npm init -y

npm i --save express

npx "@section.io/sectionctl-helper" scripts -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Create a file in your root directory named index.js. Copy the following code into it.

const express = require('express')
const app = express()
const port = process.env.PORT || 8080

app.get('/', (req, res) => {
  res.send('Welcome to Section')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Edit your package.json scripts add:

    "start": "node index.js"

React​

npx create-react-app --use-npm first-section-app

cd first-section-app

Update your scripts in package.json and add an entry point for Express.js.

This can be done with the npx script:

npx "@section.io/sectionctl-helper" static build/ -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Vue​

Install the Vue CLI globally with npm.

npm install -g @vue/cli

vue create first-section-app

cd first-section-app

Update your scripts in package.json and add an entry point for Express.js.

This can be done with the npx script:

npx "@section.io/sectionctl-helper" static dist/ -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

NuxtJS​

npx create-nuxt-app first-section-app

cd first-section-app

npm run build

npm run generate

Update your package.json with deploy and predeploy scripts.

This can be done with the npx script:

npx "@section.io/sectionctl-helper" scripts -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Section apps listen on port 8080. Modify package.json to add -p 8080 to the end of your start script.

It should look like: "start": "nuxt start -p 8080",

NextJS​

npx create-next-app first-section-app

cd first-section-app

Update your package.json with deploy and predeploy scripts.

This can be done with the npx script:

npx "@section.io/sectionctl-helper" scripts -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Section apps listen on port 8080. Modify package.json to add -p 8080 to the end of your start script.

It should look like: "start": "next start -p 8080",

Ember​

Install the Ember CLI globally with npm.

npm install -g ember-cli

ember new first-section-app --lang en

cd first-section-app

Update your scripts in package.json and add an entry point for Express.js.

This can be done with the npx script:

npx "@section.io/sectionctl-helper" static dist/ -a [YOUR ACCOUNT ID] -i [YOUR APP ID]

Finally, build the app with

npm run build

tip

If Ember does not generate assets with fingerprints in the filename, you can disable fingerprint generation in ember-cli-build.js. The build command should be run with ⁠-⁠-⁠environment=production, which is set by Ember in the default build script in package.json.

Congratulations! You should now have an application that is ready to be deployed on Section.

Run the development server​

You now have a new directory called first-section-app. Let’s cd into it:

` cd first-section-app

Start the development server with

npm install

npm start

tip

The Section platform expects you have run both of these commands before you can deploy your app. You must use npm as yarn is unsupported for now.

This starts your app’s development server on port 8080.

Let’s check to see if your app is working. Open http://localhost:8080 from your browser.

Find the name of your app​

Find the ID of your account:

sectionctl apps list

The output will look something like this:

Account #1337 - Example
-------------------------------------------
APP ID            APP NAME
-------------------------------------------
 1234    abcdefghijklmnopqrstuv.section.dev
-------------------------------------------

The application name was automatically generated for you when you signed up.

Note the name of the application that is returned – you are going to use it in the final steps.

Add an SSL certificate​

Section provides SSL certificates for your apps for free.

To set this up so your app is available, run:

sectionctl certs renew abcdefghijklmnopqrstuv.section.dev

(make sure to substitute your domain when you run this command)

Deploy your app​

Now your app is ready to deploy. Run:

sectionctl deploy --account-id 1337 --app-id 1234

or

npm run deploy in your app's root directory.

(make sure to substitute your account and app IDs when you run this command)

It may take a few minutes to upload and deploy your Node.js app to Section's edge.

View your app running on Section​

Plug the app name you saw above into your browser, and you should see your app running.

Sectionctl Advanced Options​

package.json configuration​

You can add configuration for sectionctl to your package.json. sectionctl will read from the package.json and use these flags set here if not specified by the command.

It follows the template:

{
    "name": "first-section-app",
    "version": "0.1.0",
    "section": {
        "accountId": "1234", // same as  -a or --account-id
        "appId": "1234", // same as -i or --app-id
        "environment": "Production", // same as -e or --environment
        "module-name":  "nodejs", // same as --app-path
        "start-script": "production" // runs this script when starting your app
    },
    "scripts": {
        "start": "node devServer.js",
        "production": "node productionServer.js",
        "deploy": "sectionctl deploy"
    }
}

Example: running sectionctl deploy without any flags from the root of your app will read the account and app IDs from your package.json.

Monitor the state of an application​

You can use the following command to see the state of an application

sectionctl ps --watch

This will return the status of running app instances in the following format:

|     APP INSTANCE NAME     | APP STATUS | APP PAYLOAD ID |
|---------------------------|------------|----------------|
| nodejs-example-app-name-1 | Running    | unique-id-1    |
| nodejs-example-app-name-2 | Running    | unique-id-2    |

Once an app instance finishes deploying, its status will change from Deploying to Running, and replace the app instances running the older version.

View app Logs​

You can use the following command to see the logs of an application

sectionctl logs -a 1234 -i 1234

Use the --follow tag to get live mirrored logging. You will need to use an instance-name, which you can get from sectionctl ps. The resulting command looks like:

sectionctl logs -a 1234 -i 1234 --instance-name nodejs-12345abc-1abc-1a2 --follow

(make sure to substitute your account ID, app ID, and instance-name when you run this command)

Continuous integration mode (CI)​

Suppress non-error output by appending the --quiet flag to the end of each command, or by setting the system environment variable "SECTION_CI" to true.

Enable debug output​

Log debug output to the console with the --debug flag, or by setting the system enviroment variable "DEBUG" to true.

Add NGINX Server Configuration (Optional)​

In your app's root directory, you can add a configuration file named server.conf to control how NGINX will interact with your server.

The default server.conf is provided below:

location / {
    proxy_set_header X-Forwarded-For $http_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
    proxy_set_header Host $host;
    include /etc/nginx/section.module/node.conf;
}
location ~ "/next-proxy-hop/" {
    proxy_set_header X-Forwarded-For $http_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
    proxy_set_header Host $host;
    proxy_pass http://next-hop;
}
tip

Node.js Edge App Hosting is a new Section product, so it may have some rough edges. If you see something that needs improvement, we'd love to hear your feedback.