@hailer/create-app NPM

create-app

See more detailed steps of how to Getting Started (from scratch) below.

Scaffolding Your First Hailer App Project

Compatibility Note: Vite requires Node.js version 18+, 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

With NPM:

$ npm create @hailer/app@latest

With Yarn:

$ yarn create @hailer/app

With PNPM:

$ pnpm create @hailer/app

With Bun:

$ bunx @hailer/create-app

Then follow the prompts!

Currently supported template presets include:

react-ts
react-swc-ts
vanilla

You can use . for the project name to scaffold in the current directory.

Getting Started (from scratch)

Prerequisites:

i) Node (v.18 or newer) and `npm` installed
ii) Basic developer skills, like knowledge of using terminal and some code editor, like Visual Studio Code

Steps:

1) Go to Hailer in the browser

Navigate to: https://next.hailer.com

2) Register new user or log

3) If existing user, create new workspace

4) Create a Workflow

i) Navigate to Activities view. (Click the large `+` sign if there already are Workflows in the workspace)
ii) Make a workflow using the `Make custom` button.

6) Open App Manager

Navigate to: /#/apps (on next: https://next.hailer.com/#/apps)

7) Create App entry for development

Create new development app entry in Hailer (click "+"-sign in top right corner)

Name:           Local Development
Description:    App pointing to local server
URL:            http://localhost:3000

Optionally set an icon/image for the app.

The app will complain about missing manifest, which can be ignored.

8) Create App entry for publishing app

It is important to leave the URL empty, as Hailer will set it to the default publication URL automatically.

Name:           Published App
Description:    App pointing to apps.hailer.com
URL:            --leave empty--

Optionally set an icon/image for the app.

The app will complain about missing manifest, which can be ignored.

9) Create App source code from template

(For more details see: https://www.npmjs.com/package/@hailer/create-app)

Run in terminal where you want the template installed (a new folder will be created):

npm create @hailer/app@latest

i) Give project name:     react-app
ii) Select framework:     React
iii) Select variant:      TypeScript

10) Set up the template for development

cd react-app
npm install
npm run dev

11) Open Development app in Hailer

Open Local Development app from next.hailer.com (sidenav or Management view by clicking the app).

12) Open code editor

In app folder run (or use you favorite editor):

Assuming you are using Visual Studio Code you can run:

code .

or open Visual Studio Code and open the working folder.

13) Make some changes to see updates live

Find src/App.tsx file and scroll down to rendering section, and add

<h1>Cool App</h1>

before <ChartDemo />

Save the file and verify that the app has updated.

14) Prepare App for publication

A) Prepare code

i) Go to https://next.hailer.com, and open the `Manage Apps and Insights`-view. 
ii) Click on edit button on the right-hand side of the app named `Published App`.
iii) Click the appId under the title to copy it (Looks something like: `6530f52e9f6c4d20587ed306`)
iv) Click Cancel to close the dialog
v) Open code editor and navigate to `public/manifest.json` and replace appId value.
vi) Save the `manifest.json` file.

B) Prepare App visibility permissions

Who can see the app after publication. Defaults to only yourself and admins in the workspace.

i) Go to https://next.hailer.com, and open the `Manage Apps and Insights`-view. 
ii) Click on `...` button on the right-hand side of the app named `Published App`.
iii) Select `Permisisons` (Defaults to user who created app. Admins can see all apps.)

15) Publish the app in the workspace

Publish the app under Published App in the workspace

i) Turn off the `npm run dev` (`Ctrl+C`)
ii) Run publish command

EMAIL=app.test@domain.com npm run publish-production

Replace app.test@domain.com with your Hailer user email.

The publish command will ask for your password to publish the app.

Before application is published it will prompt you with the details about where the app will be published.

Publishing App
  Id: 6530f52e9f6c4d20587ed306
  Name: Published App
  Workspace: My Hailer (6530f2a3a5b8ea5d1a08c3f9)
  Environment: https://api.hailer.com

If there is an existing app it will overwrite the old app.