The Superawesome Frontend Boilerplate

My Vue frontend starter with tests, CI/CD, backend - everything dockerized, don't even need nodejs locally! Also with a styleguide for large-scale frontend based on my experience

The only requirements are docker and taskfile.

How to use

If you launch for the first time:

cd .dev
task env
task init
task up

If not:

cd .dev
task up

And that's all!

You now have backend, tests, CI/CD, and other fancy buzzwords but nothing is installed on your machine locally. You are gorgeous!

Go to localhost and hooray!

Stack

Frontend: vue 3, typescript, xstate, tailwind, vite-ssg.

Backend: nodejs, express.

Test: vitest for unit, playwright for e2e.

Lint: eslint with custom config (based on antfu/eslint-config) + stylelint with custom config.

Features

• Styleguide for large-scale frontend based on my experience.

• Live tests management panel.

  It's just something to place it on another monitor and immediately know if something breaks.

  

• Ready to CI/CD to Github Actions.

  Test and build on pull request to master, deploy on push to master.

• Xstate.

  I am such a huge fan of it, I use it in every project. See an example of a login machine here.

  Also check how XState can own e2e-testing here.

  Invest your time into learning it, it's an absolute life changer.

Known issues:

• If you are not on Linux, you need to go to Taskfile.yaml and search for TODO.

  You will need to add some tweaks to the configuration.

• When you visit live tests management panel for the first time there will be no e2e tests.

  You need to manually run task test:e2e (or task test:e2e:ui), then task restart.