create-leaflink-spa
v1.3.0
Published
A streamlined way to setup new SPA projects within Leaflink
Downloads
307
Readme
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.