Miscellaneous notes on the frontend

Formatting and Linting

The code in this repository is formatted using prettier. If you have prettier setup in your code editor it should work out of the box; otherwise you can use the just frontend/run lint script to format and fix lint errors in your code. Checks are run to lint your code and validate the formatting on git precommit.

You will need to fix any linting issues before committing. We recommend formatting your JavaScript files on save in your text editor. You can learn how to do this in Visual Studio Code here.

File name conventions

All files and folders should be written in kebab-case, with the exception of Vue single file components. If it ends in .vue, please use PascalCase. This distinction makes our component files stand out clearly and is recommended by the Vue community.

Redirects

From	To	Status code	Setup level
/photos/_id	/image/_id	301	Nuxt server middleware

Frontend Components

The frontend app is composed of a number of components that are documented in our Storybook.

How to create a component

To create a component you can run:

# Make sure you have run `pnpm install` at least once before.
pnpm run create:component [component name in PascalCase]
for example: pnpm run create:component VButtonGreen

This command will create a component file, a story file for the component, a unit test file, and a regression test file. It also adds the component name to tsconfig.ts include property. Each file will have a basic template to start working with. We use the itsjonq/remake package to create files out of templates.

You can also create all those files manually by running the following commands:

create a component file

pnpm run create:component-sfc --output=[path] --name=[component name]

create a story file

pnpm run create:story --output=[path] --name=[component name]

create a component unit test file

pnpm run create:component-unit-test --output=[path] --name=[component name] --fileName=[component name in kebab-case]

create a component regression test file

pnpm run create:component-storybook-test --output=[path] --name=[component name kebab-case] --fileName=[component name in kebab-case]

CSS Framework

To design our components, we use the TailwindCSS utility-first CSS framework. We have compiled a list of TailwindCSS classes that are used in the frontend app. You can view the list here.

Development Tips

If you use VS Code, you can install the Tailwind CSS IntelliSense extension to get autocomplete for TailwindCSS classes.

Finding your local IP address

You can find the local IP address Nuxt uses by looking at the output of nuxt dev. Look in your console for a box of configuration details that looks like this:

#  ╭───────────────────────────────────────────╮
#  │                                           │
#  │   Nuxt @ v2.15.8                          │
#  │                                           │
#  │   ▸ Environment: development              │
#  │   ▸ Rendering:   server-side              │
#  │   ▸ Target:      server                   │
#  │                                           │
#  │   Listening: http://192.168.50.119:8443/  │ # <-- Use this IP Address
#  │                                           │
#  ╰───────────────────────────────────────────╯

You will need to regenerate the certificate if this IP address changes for any reason, like by enabling a VPN or changing networks.