Quickstart

Quickstart (opens in a new tab) accelerates getting a developer up and running with apps that use Hellō. It returns a client_id by creating a new app with defaults, or selecting an existing Hellō app.

The Hellō Login (opens in a new tab) WordPress plug-in and Hellō Next.js Sample (opens in a new tab) app use Hellō Quickstart.

There are three mechanisms to invoke Quickstart:

1. Load https://quickstart.hello.coop with query parameters. This can be used by any configuration script. See API Reference | Quickstart for details.
2. Run the Quickstart CLI with npx @hellocoop/quickstart@latest passing command line parameters. This requires the developer to have Node.js installed.
3. Import the @hellocoop/quickstart npm package into a Node.js script and use the module.

(2) and (3) both start a local web server on an unused port and launch the default web browser to load the Quickstart Web App.

CLI Parameters

You can run the following command to create or retrieve the client_id for a Hellō Application.

npx @hellocoop/quickstart@latest

This will open up a browser window, where you will need to login with Hellō, and then choose to create a new app, or return the client_id.

CLI Options

Configuration Options:

• --provider_hint (-p) - space separated string of provider_hint
• --suffix (-x) - suffix to add to generated app name
• --integration (-i) - integration name shown in console
• --wildcard_domain (-w) - boolean to set the wildcard domain Development Redirect URI

Framework Templates:

• --nextjs - configure a Next.js app with App Router (default)
• --nextjs_app_router - configure a Next.js app with App Router
• --nextjs_pages_router - configure a Next.js app with Pages Router
• --express - configure an Express app
• --fastify - configure a Fastify app

Framework Template Features

The framework templates automatically:

1. Create hello.config.js - Configuration file with the obtained client_id
2. Generate environment files - Add HELLO_COOKIE_SECRET to .env or .env.local
3. Framework-specific setup:
   • Next.js: Creates API route files (app/api/hellocoop/route.js or pages/api/hellocoop.js)
   • Express/Fastify: Sets up basic configuration structure

Example files created by --nextjs:

• hello.config.js - Hellō configuration
• app/api/hellocoop/route.js - Next.js API route (App Router)
• .env.local - Environment variables

Example files created by --express:

• hello.config.js - Hellō configuration
• .env - Environment variables

Default Framework Options

Each framework template uses optimized default options:

Next.js defaults:

• integration: 'quickstart-nextjs'
• suffix: 'Next.js App'
• wildcard_domain: true
• provider_hint: 'google github gitlab apple-- email--'

Express defaults:

• integration: 'quickstart-express'
• suffix: 'Express App'
• wildcard_domain: true
• provider_hint: 'google github gitlab apple-- email--'

Fastify defaults:

• integration: 'quickstart-fastify'
• suffix: ' Fastify App'
• wildcard_domain: true
• provider_hint: 'google github gitlab apple-- email--'

@hellocoop/quickstart API

quickstart(config)

You can incorporate Quickstart in a Node.js script as part of your installer

To install in a project:

npm install -D @hellocoop/quickstart

You can then use call Quickstart from a configuration script, example:

// typescript
import quickstart from '@hellocoop/quickstart';
 
...
const config = {
    response_uri: 'http://localhost:8080',
    name: 'Acme Demo App'
    // ... other config parameters
}
 
const client_id = await quickstart(config)

API Config Options

All options are passed through as query parameters to the Quickstart Web App, and are documented in API Reference | Quickstart

Environment Variables

The Quickstart CLI and API support the following environment variables:

Example:

HELLO_DOMAIN=hello.dev npx @hellocoop/quickstart@latest