feat: use pnpm #1789

Merged
konrad merged 7 commits from dpschen/frontend:feature/feat-use-pnpm into main 2022-09-21 20:49:14 +00:00
11 changed files with 13397 additions and 13600 deletions

View File

@ -29,26 +29,91 @@ steps:
# AWS_SECRET_ACCESS_KEY:
# from_secret: cache_aws_secret_access_key
# settings:
# debug: true
# restore: true
# bucket: kolaente.dev-drone-dependency-cache
# endpoint: https://s3.fr-par.scw.cloud
# region: fr-par
# path_style: true
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
# mount:
# - '.cache'
# - .cache
- name: dependencies
image: node:18
image: node:18-alpine
pull: true
environment:
YARN_CACHE_FOLDER: .cache/yarn/
CYPRESS_CACHE_FOLDER: .cache/cypress/
PNPM_CACHE_FOLDER: .cache/pnpm
CYPRESS_CACHE_FOLDER: .cache/cypress
Review

Does it work if you re-add the / at the end?

Does it work if you re-add the `/` at the end?
Review

Probably not:
https://docs.cypress.io/guides/references/advanced-installation#Binary-cache

If I remember correctly removing the / was already a test. I guess both works.
Since the version without / is mentioned in the docs I kept that.

Probably not: https://docs.cypress.io/guides/references/advanced-installation#Binary-cache If I remember correctly removing the `/` was already a test. I guess both works. Since the version without `/` is mentioned in the docs I kept that.
commands:
- yarn --frozen-lockfile --network-timeout 100000
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm install --fetch-timeout 100000
# depends_on:
# - restore-cache
- name: lint
image: node:18-alpine
pull: true
environment:
PNPM_CACHE_FOLDER: .cache/pnpm
commands:
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm run lint
depends_on:
- dependencies
- name: build-prod
image: node:18-alpine
pull: true
environment:
PNPM_CACHE_FOLDER: .cache/pnpm
commands:
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm run build
depends_on:
- dependencies
- name: test-unit
image: node:18-alpine
pull: true
commands:
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm run test:unit
depends_on:
- dependencies
- name: typecheck
failure: ignore
image: node:18-alpine
pull: true
environment:
PNPM_CACHE_FOLDER: .cache/pnpm
commands:
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm run typecheck
depends_on:
- dependencies
- name: test-frontend
image: cypress/browsers:node16.14.0-chrome99-ff97
pull: true
environment:
CYPRESS_API_URL: http://api:3456/api/v1
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
PNPM_CACHE_FOLDER: .cache/pnpm
CYPRESS_CACHE_FOLDER: .cache/cypress
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
CYPRESS_RECORD_KEY:
from_secret: cypress_project_key
commands:
- sed -i 's/localhost/api/g' dist/index.html
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm cypress install
- pnpm run serve:dist & npx wait-on http://localhost:4173
- pnpm run test:frontend --browser chrome --record
depends_on:
- build-prod
# - name: rebuild-cache
# image: meltwater/drone-cache:dev
# pull: true
@ -63,70 +128,14 @@ steps:
# endpoint: https://s3.fr-par.scw.cloud
# region: fr-par
# path_style: true
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
# mount:
# - '.cache'
# - .cache
# depends_on:
# - dependencies
- name: lint
image: node:18
pull: true
environment:
YARN_CACHE_FOLDER: .cache/yarn/
CYPRESS_CACHE_FOLDER: .cache/cypress/
commands:
- yarn run lint
depends_on:
- dependencies
- name: build-prod
image: node:18
pull: true
environment:
YARN_CACHE_FOLDER: .cache/yarn/
commands:
- yarn build
depends_on:
- dependencies
- name: test-unit
image: node:18
pull: true
commands:
- yarn test:unit
depends_on:
- dependencies
- name: typecheck
failure: ignore
image: node:18
pull: true
commands:
- yarn typecheck
depends_on:
- dependencies
- name: test-frontend
image: cypress/browsers:node16.14.0-chrome99-ff97
pull: true
environment:
CYPRESS_API_URL: http://api:3456/api/v1
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
YARN_CACHE_FOLDER: .cache/yarn/
CYPRESS_CACHE_FOLDER: .cache/cypress/
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
CYPRESS_RECORD_KEY:
from_secret: cypress_project_key
commands:
- sed -i 's/localhost/api/g' dist/index.html
- yarn serve:dist & npx wait-on http://localhost:4173
- yarn test:frontend --browser chrome --record
depends_on:
- build-prod
- name: deploy-preview
image: node:18
image: node:18-alpine
pull: true
environment:
NETLIFY_AUTH_TOKEN:
@ -139,6 +148,7 @@ steps:
- cp -r dist dist-preview
# Override the default api url used for preview
- sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
- apk add --no-cache perl-utils
- shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
- node ./scripts/deploy-preview-netlify.js
depends_on:
@ -181,21 +191,22 @@ steps:
# endpoint: https://s3.fr-par.scw.cloud
# region: fr-par
# path_style: true
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
# mount:
# - '.cache'
# - .cache
- name: build
image: node:18
image: node:18-alpine
pull: true
group: build-static
environment:
YARN_CACHE_FOLDER: .cache/yarn/
PNPM_CACHE_FOLDER: .cache/pnpm
commands:
- yarn --frozen-lockfile --network-timeout 100000
- yarn run lint
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/.pnp
- pnpm install --fetch-timeout 100000
- pnpm run lint
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
- yarn run build
- pnpm run build
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
# depends_on:
# - restore-cache
@ -256,21 +267,22 @@ steps:
# endpoint: https://s3.fr-par.scw.cloud
# region: fr-par
# path_style: true
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
# mount:
# - '.cache'
# - .cache
- name: build
image: node:18
image: node:18-alpine
pull: true
group: build-static
environment:
YARN_CACHE_FOLDER: .cache/yarn/
PNPM_CACHE_FOLDER: .cache/pnpm
commands:
- yarn --frozen-lockfile --network-timeout 100000
- yarn run lint
- corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
- pnpm install --fetch-timeout 100000
- pnpm run lint
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
- yarn run build
- pnpm run build
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
# depends_on:
# - restore-cache
@ -647,6 +659,6 @@ steps:
from_secret: crowdin_key
---
kind: signature
hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
hmac: 9e9585222c466c67b426df40c76670f1a539c363a52075ff34e7f4518e67da2d
...

4
.gitignore vendored
View File

@ -8,10 +8,14 @@ node_modules
.env.*.local
# Log files
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
stats.html
pnpm-debug.log*
lerna-debug.log*
# Editor directories and files
.idea

2
.npmrc Normal file
View File

@ -0,0 +1,2 @@
auto-install-peers=true
fetch-timeout=100000

View File

@ -1,5 +1,5 @@
{
"eslint.packageManager": "yarn",
"eslint.packageManager": "pnpm",
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true

View File

@ -1,28 +1,41 @@
# Stage 1: Build application
FROM node:18 AS compile-image
FROM node:18-alpine AS compile-image
WORKDIR /build
ARG USE_RELEASE=false
ARG RELEASE_VERSION=main
ENV YARN_CACHE_FOLDER .cache/yarn/
COPY . ./
RUN \
if [ $USE_RELEASE = true ]; then \
rm -rf dist/ && \
wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
unzip frontend-release.zip -d dist/ && \
exit 0; \
fi && \
fi
ENV PNPM_CACHE_FOLDER .cache/pnpm/
Review

This is the only place where there is now a final /

This is the only place where there is now a final `/`
# pnpm fetch does require only lockfile
konrad marked this conversation as resolved Outdated

But we'll still need to copy all frontend files anyway?

But we'll still need to copy all frontend files anyway?

Yes. This just makes that step cachable.

Copying everything over happens in line 28.

Yes. This just makes that step cachable. Copying everything over happens in line 28.
COPY pnpm-lock.yaml ./
RUN \
# https://pnpm.io/installation#using-corepack
corepack enable && \
corepack prepare pnpm@7.9.3 --activate && \
# Build the frontend
yarn install --frozen-lockfile --network-timeout 100000 && \
echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
yarn run build
pnpm fetch
ADD . ./
RUN apk add --no-cache git
RUN \
pnpm install --offline && \
echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
pnpm run build
# Stage 2: copy
FROM nginx
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY run.sh /run.sh
@ -36,4 +49,10 @@ ENV PGID 1000
LABEL maintainer="maintainers@vikunja.io"
RUN apk add --no-cache \
# for sh file
bash \
# installs usermod and groupmod
shadow
CMD "/run.sh"

View File

@ -22,25 +22,25 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
## Project setup
```shell
yarn install
pnpm install
```
### Compiles and hot-reloads for development
```shell
yarn run serve
pnpm run serve
```
### Compiles and minifies for production
```shell
yarn run build
pnpm run build
```
### Lints and fixes files
```shell
yarn run lint
pnpm run lint
```
## Sponsors

View File

@ -36,7 +36,7 @@ to get a shell inside the cypress container.
In that shell you can then execute the tests with
```shell
yarn test:frontend
pnpm run test:frontend
```
### Using The Cypress Dashboard
@ -44,5 +44,5 @@ yarn test:frontend
To open the Cypress Dashboard and run tests from there, run
```shell
yarn cypress:open
pnpm run cypress:open
```

View File

@ -1,5 +1,5 @@
[build]
command = "yarn build"
command = "pnpm run build"
publish = "dist-preview"
[[redirects]]

View File

@ -35,6 +35,7 @@
"blurhash": "2.0.0",
"bulma-css-variables": "0.9.33",
"camel-case": "4.1.2",
"codemirror": "5.65.7",
"date-fns": "2.29.3",
"dompurify": "2.4.0",
"easymde": "2.18.0",
@ -49,6 +50,7 @@
"pinia": "2.0.22",
"register-service-worker": "1.7.2",
"snake-case": "3.0.4",
"sortablejs": "1.15.0",
"ufo": "0.8.5",
"v-tooltip": "4.0.0-beta.17",
"vue": "3.2.39",
@ -105,5 +107,5 @@
}
},
"license": "AGPL-3.0-or-later",
"packageManager": "yarn@1.22.19"
"packageManager": "pnpm@7.9.3"
}

13259
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load Diff

13501
yarn.lock

File diff suppressed because it is too large Load Diff