Skip to content
This repository has been archived by the owner on Apr 17, 2024. It is now read-only.
/ frontend-elm-kit Public archive

Standard development kit for Elm projects inside Paack.

License

Notifications You must be signed in to change notification settings

PaackEng/frontend-elm-kit

Repository files navigation

frontend-elm-kit

A set of tools and integrations used by our Elm applications.


Installing

Adding to a new project? Create a .npmrc file in its root with the following content:

@PaackEng:registry=https://npm.pkg.github.com

First time installing a private npm package from Paack's Github? Setup your token.

Once the above is done, just install it:

$ yarn add @PaackEng/frontend-elm-kit

Add it as a source directory in the elm.json:

"type": "application",
"source-directories": [
  "src",
+ "node_modules/@PaackEng/frontend-elm-kit/elm"
],

Integrating

In order to integrate this package into your project there are some extra changes that need to be made:

  • Install all the required packages with exception of elm/html
  • Make sure that the modules Data.Environment, Main.Model, Main.Msg, Main.Update, Effects.Local and Effects.Performer all exist. Look at the example folder for a minimal setup
  • If you're using parcel v1 disable sourcemaps with --no-source-maps

Auth0

  • Ensure that the ports checkSession, login and logout are all present
  • Provide all the four seeds (randomSeed1, 2, 3 and 4) in the app's Flags
  • Install the Auth0 SPA SDK
  • If your application isn't using Effect yet you can use Auth.performEffects to convert them on the fly. Otherwise, it's recommended to use Effects.MainHelper

Firebase

Rollbar

  • Make sure your model includes appConfig.environment. codeVersion, rollbarToken and url;
  • You'll need a message for receiving feedback, see how the example performs the effect;

Mixpanel

  • Provide the two flags mixpanelToken and mixpanelAnonId which should be saved to the localStorage;

Extending configuration

This package provides default configuration for Eslint, Prettier and TypeScript. Here's how to extend the config:

.eslintrc.json

{
+  "extends": "./node_modules/@PaackEng/frontend-elm-kit/eslintconfig.json"
}

package.json

  "name": "lmo-web",
  "version": "1.0.0",
  "description": "Last-Mile Operations",
+ "prettier": "@PaackEng/frontend-elm-kit/prettier",

tsconfig.json

{
+  "extends": "@PaackEng/frontend-elm-kit/tsconfig.json",
+  "include": ["web/ts"]
}

Suggestions

Rollbar

  • Don't forget to update the url value in model when it changes;
  • Compose errors with Paack.Rollbar module;
  • Easy transform Http errors with Paack.Rollbar.Http module;
  • Easy transform Graphql errors with Paack.Rollbar.Graphql module;
  • Produce the effect with Paack.Rollbar.Dispatch.

Deploying

Bump the version according to the change that was made. Once it's merged to main just push a tag in the format v*.*.*.

  "name": "@PaackEng/frontend-elm-kit",
- "version": "0.0.3",
+ "version": "1.0.0",
$ git tag -a v1.0.0 -m "First version"
$ git push --tags

Running the example

Navigate to the example folder, then create a .env file and fill in the values (you can copy them from any project where Auth0 is configured). After that you can run it with yarn start.