Create-leaflink-spa NPM

create-leaflink-spa

The recommended way to create a new front-end single page application (SPA) at LeafLink.

Usage

In the terminal, run npm create leaflink-spa and follow the prompts to configure a new project and create a project directory. To be consistent with our other SPAs, the generated project has a directory structure based on marketplace-web, with everything you should need to get started with a new SPA.

In addition, an /iac directory is created that contains Terraform configs needed to provision your new project as a Github repo, along with a readme with instructions. Terraform configs for environment provisioning contain secrets and should be requested in #devops-support-requests when you are ready to deploy.

Frontend Stack

Currently, front-end applications at LeafLink are built and maintained with the following core stack, included out of the box with this initializer.

Core

@auth0/auth0-vue (auth platform integration, with helper code in app)
axios (network, with auth)
date-fns (date utilities)
tailwindcss (CSS utility classes)
typescript (typescript support)
vite (dev server)
husky (local commit checks)

Application

@leaflink/stash (design system)
@tanstack/vue-query (query state management)
pinia (local state management)
vue-router (routing)
vue (everything else)

Testing

@faker-js/faker (random data generation, with helper code in app)
@testing-library/vue (test framework)
vitest (test runner)

Motivation

To support growth and replatforming at LeafLink, we need consistent and repeatable processes to create new front-end codebases. create-leaflink-spa provides an npm initializer that creates a new SPA project following our existing standards and practices for front-end applications.