Kristaps Fabians Geikins
56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# frontend-2 🏬
|
|
|
|
The replacement for our old Vue 2 Vue CLI frontend SPA app. This one's built with Vue 3, Nuxt 3, Tailwind and is server side rendered. Should be a faster and nicer experience both for our devs and our users!
|
|
|
|
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
|
|
|
|
## Setup
|
|
|
|
Make sure to install the dependencies:
|
|
|
|
```bash
|
|
yarn install
|
|
```
|
|
|
|
And create an `.env` file from `.env.example`.
|
|
|
|
### WSL2 on Windows
|
|
|
|
Remove the HOST env var from your `.env` file as its known to cause performance issues with the Nuxt dev server: https://github.com/nuxt/cli/issues/209
|
|
|
|
## Development
|
|
|
|
Start the development server on http://localhost:8081
|
|
|
|
```bash
|
|
yarn dev
|
|
```
|
|
|
|
### Typed GraphQL
|
|
|
|
Type your queries & fragments using the `graphql()` helper from `~~/lib/common/generated/gql` and then run `yarn gqlgen` (or `yarn gqlgen:watch` to run it in watch mode) to generated TS typing information for these GQL documents.
|
|
|
|
More info: https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen
|
|
|
|
### Troubleshooting
|
|
|
|
#### ESLint results doesn't update after GQL type regeneration
|
|
|
|
Restart the ESLint plugin through VSCode's command palette, this is a bug with the ESLint plugin.
|
|
|
|
#### GraphQL codegen throws an error like "Unknown fragment XXX" or something else that doesn't make sense
|
|
|
|
Sometimes the codegen throws misleading errors and the issue is actually something completely different so I suggest removing the new graphql fragments/operations you've added one by one until the generation works again, to isolate the problematic graphql code. And then thoroughly investigate the fragments/operations you've added, because you might have a syntax error somewhere.
|
|
|
|
## Production
|
|
|
|
Build the application for production:
|
|
|
|
```bash
|
|
yarn build
|
|
```
|
|
|
|
You can serve the production build locally by running `yarn preview` afterwards.
|
|
|
|
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
|