shouldieatthere.co.uk

The sauce behind shouldieatthere.co.uk. Eat Cleaner.

Usage

Docker

docker-compose up --build

The app can be found at localhost:9091.

Without Docker

yarn
yarn serve

The app can be found at localhost:8080.

Linting & Code Style

This project uses a number of tools and configurations to enforce an opinionated and rigorous code style. These are run as you save by the dev server and can also be run using:

# Docker
docker-compose --rm web yarn lint

## No Docker
yarn lint

ESLint

JavaScript/Vue linting is provided by ESLint and follows eslint-config-airbnb and vue/strongly-recommended, with the following adjustments:

• max-len which is set to 150 to accommodate the verbosity of HTML in Vue templates.
• vue/html-closing-bracket-newline which is set to never for both single and multiline HTML. Why? Because closing braces floating on their own line are ugly.

Config file: .eslintrc.js

Stylelint

CSS/SCSS linting is provided by Stylelint and follows stylelint-config-recommended, stylelint-scss and stylelint-order, with the following adjustments:

• rule-empty-line-before which is set to always, because space is not only the final frontier, but also paramount to readable (S)CSS.
• order/properties-alphabetical-order set to true, which makes it much faster and easier to find properties in a block.

Config file: stylelint.config.js

Testing

Tests can be run with the following:

# Docker
docker-compose --rm web yarn test

## No Docker
yarn test

Production builds

You'll need to add the CA Certificate in config/ssl for HTTPS to work correctly on your machine. Once you've done this, simply run:

# Docker
docker-compose run --rm web -p 9091:8080 yarn run serve:production

# No Docker
yarn run serve:production

The site will load on https://localhost:9091. And the build will be available in the dist/ folder.

Configuration

Environment variables

Environment variables follow the vue.js standard, using .env files for each mode. Variables exposed to the client side must be prefixed with VUE_APP and must not contain any sensitive information.

For a list of required environment variables, see .env.example.

vue.config.js

Configuration of the build process and any extensions of the bundled webpack configuration are found in here. Hopefully you won't need to open touch this unless you need to add a new Webpack plugin or loader. The full documentation can be found at cli.vuejs.org/config.

Project structure

The project follows the standard vue.js template as generated by the Vue CLI.

Deployments

Deployments are currently hosted and managed by Vercel (formerly Zeit).

Production

Built from master.

🔗 shouldieatthere.co.uk

Preview

Built from develop.

🔗 preview.shouldieatthere.co.uk