The recommended way to create a new front-end single page application (SPA) at LeafLink.
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.
Currently, front-end applications at LeafLink are built and maintained with the following core stack, included out of the box with this initializer.
-
@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)
-
@leaflink/stash
(design system) -
@tanstack/vue-query
(query state management) -
pinia
(local state management) -
vue-router
(routing) -
vue
(everything else)
-
@faker-js/faker
(random data generation, with helper code in app) -
@testing-library/vue
(test framework) -
vitest
(test runner)
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.