# diva-e website 2023

## Setup

Make sure to install the dependencies:

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install
```

## Create and setup self signed certificate to enable https test env

Install (if needed) mkcert on your system. Example for Ubuntu / Mac:

```bash
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
sudo mv mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
sudo chmod +x /usr/bin/mkcert
mkcert -install
```

Windows with WSL: 

Install mkcert: https://technixleo.com/create-locally-trusted-ssl-certificates-with-mkcert-on-windows/

Generate certificate:

```bash
mkcert localhost
```

NOTE: On windows running the project in WSL, ensure to run mkcert from windows since the root certs have to be used by the browser

NOTE 2: If running node 18, it is possible that this error: "[nuxt] [request error] [unhandled] [500] fetch failed (https://localhost:3000/__nuxt_vite_node__/manifest)" appears. If so, try to add the following to the .env file:

NODE_TLS_REJECT_UNAUTHORIZED=0

## Storyblok cli

Install storyblok command globally - required to extract json component structure to create blok types:

```
npm i storyblok -g
```

## IDE setup

VS recommended extensions: 
- ESLint, Vue Language Features (Volar), Sass, Prettier
- Enable Volar takeover mode: https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

## Development Server

Start the development server on https://localhost:3000

```bash
npm run dev
```

## Generating storyblok component types (TS)

1. Login to storyblok command line (if not logged in yet):

```bash
storyblok login
```

2. Get components json definition & generate types

```bash
npm run generate-sb-types
```

## Production

Build the application for production:

```bash
npm run build
```

Locally preview production build:

```bash
npm run preview
```