stride-scripts

stride-scripts

Inspired by create-react-app, these scripts give you a great Stride addon development and deployment experience out of the box.

# starts ngrok and express, transpiles your code in watch mode, opens browser
stride-scripts start

# compiles your whole addon into a /build folder
stride-scripts build

Features

Main features

• Sets up an Express server with sensible default routes (/installed, /healthcheck, etc) that can be overridden
• Loads and transpiles your routes from /src/routes/*.js
• Request logging
• JWT validation middleware
• Bundles your React (CSS coming soon)
• Nicely styled 500 error template in case anything goes wrong (coming soon)

Dev features (stride-scripts start)

• Automatic ngrok tunnel setup
• Injects the ngrok URL into the baseUrl field of your app-descriptor.json
• Watches your files and recompiles automatically
• Compatible with nanos

Prod features (stride-scripts build)

• Bundles your /src and /public folders into a single transpiled /build directory, ready to be run.

Installation

Just add stride-scripts as a dependency in your package.json and hook up the start/build scripts:

{
  "name": "my-stride-addon",
  "scripts": {
    "start": "stride-scripts start",
    "build": "stride-scripts build"
  },
  "dependencies": {
    "stride-scripts": "^0.0.49"
  }
}

The scripts expect your app to have the following structure:

- package.json
- src/
    client/
      index.js
    routes/
      hello-world.js
- public/
    app-descriptor.json

That's it! Each route file should export a function that accepts the Express app object. You can do whatever you like with it:

export default app => {
  app.get("/hello-world", (req, res) => {
    res.send("Hello world");
  });
};

Usage

To run in dev mode, use stride-scripts start. This sets up an ngrok tunnel, an Express server, and webpack in watch mode.

Once you're ready to deploy, use stride-scripts build to produce a /build directory with everything you need to deploy.

Demo

Check out the /example folder in this repo for a hello world example addon.

The Team Map for Stride addon also uses this.

Todo

• CSS/Less import support
• Jest support

Enjoy!