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.