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.

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

Set up an app

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.

An app is dynamic if it runs its own webserver. Dynamic sites may render web pages server-side or process information on the server.

Use a Framework

ExpressJS

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

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

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.

Your app is now ready to deploy

Next: deploy your Node.js app.

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.