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
Download sectionctl-v1.12.3-linux-amd64.deb
Download sectionctl-v1.12.3-linux-amd64.rpm
Download sectionctl-v1.12.3-linux-amd64.tar.gz
Windows
MacOS
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.
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.