Commit 546f0256 authored by Stefan Probst's avatar Stefan Probst
Browse files

feat: switch to next

parent 02f19676
Pipeline #160783 passed with stage
in 4 minutes and 15 seconds
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# caches
.eslintcache
*.tsbuildinfo
# auto-generated favicons
public/android-chrome-192x192.png
public/android-chrome-512x512.png
public/apple-touch-icon.png
public/favicon-16x16.png
public/favicon-32x32.png
public/favicon.ico
public/site.webmanifest
# auto-generated sitemap
public/robots.txt
public/sitemap.xml
# auto-generated api clients
src/api/sshoc/index.ts
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{md,mdx}]
trim_trailing_whitespace = false
REACT_APP_API_BASE_URL=http://localhost:8080
REACT_APP_MATOMO_BASE_URL=
REACT_APP_MATOMO_SITE_ID=
\ No newline at end of file
GITLAB_BASE_URL=https://gitlab.gwdg.de
GITLAB_REPOSITORY=sshoc/sshoc-marketplace-frontend
SSHOC_OPENAPI_DOCUMENT_URL=https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at/v3/api-docs
NEXT_PUBLIC_SSHOC_BASE_URL=https://sshoc-marketplace.acdh-dev.oeaw.ac.at
NEXT_PUBLIC_SSHOC_API_BASE_URL=https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at
# NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
NEXT_PUBLIC_MATOMO_BASE_URL=https://matomo.acdh.oeaw.ac.at/
NEXT_PUBLIC_MATOMO_SITE_ID=179
### used for creating oauth2 links
### frontend base url, defaults to http://localhost:3000
# NEXT_PUBLIC_SSHOC_BASE_URL=https://sshoc-marketplace.acdh-dev.oeaw.ac.at
### backend base url, defaults to http://localhost:8080
# NEXT_PUBLIC_SSHOC_API_BASE_URL=https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at
### recaptcha key for contact form
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
### sshoc marketplace openapi document used to build the api client, defaults to http://localhost:8080/v3/api-docs
# SSHOC_OPENAPI_DOCUMENT_URL=https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at/v3/api-docs
### gitlab repository is used to get "last updated" timestamp for static content pages
### if not provided, current date will be used for timestamps
GITLAB_BASE_URL=https://gitlab.gwdg.de
GITLAB_REPOSITORY=sshoc/sshoc-marketplace-frontend
# GITLAB_REPOSITORY_BRANCH=main
### optional access token for non-public repository
# GITLAB_ACCESS_TOKEN=
### Matomo analytics
# NEXT_PUBLIC_MATOMO_BASE_URL=
# NEXT_PUBLIC_MATOMO_SITE_ID=
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# vercel
.vercel
# caches
.eslintcache
*.tsbuildinfo
cypress/screenshots
cypress/videos
# auto-generated favicons
public/android-chrome-192x192.png
public/android-chrome-512x512.png
public/apple-touch-icon.png
public/favicon-16x16.png
public/favicon-32x32.png
public/favicon.ico
public/site.webmanifest
storybook-static
# auto-generated sitemap
public/robots.txt
public/sitemap.xml
# CI cache
.cache
\ No newline at end of file
# auto-generated api clients
src/api/sshoc/index.ts
stages:
- build
- validate
- test
- package
variables:
CYPRESS_CACHE_FOLDER: '${CI_PROJECT_DIR}/.cache/Cypress'
YARN_CACHE_FOLDER: '${CI_PROJECT_DIR}/.cache/yarn'
.cache:
......@@ -13,56 +10,19 @@ variables:
key: $CI_COMMIT_REF_SLUG
paths:
- .cache/yarn
- .cache/Cypress
install:
stage: build
extends: .cache
image: node:12-alpine
image: node:14-alpine
before_script:
- apk update && apk upgrade && apk add --no-cache git
script:
- yarn --frozen-lockfile --silent
only:
changes:
- yarn.lock
validate:
image: node:12-alpine
stage: validate
extends: .cache
cache:
policy: pull
script:
- yarn --frozen-lockfile --silent
- yarn commitlint --from=main --to=$CI_COMMIT_SHA
- yarn format
- yarn lint
test:
stage: test
image: node:12-alpine
extends: .cache
cache:
policy: pull
script:
- yarn --frozen-lockfile --silent
- yarn test
test:e2e:
stage: test
image: cypress/base:12
extends: .cache
cache:
policy: pull
script:
- yarn --frozen-lockfile --silent
- yarn test:e2e
artifacts:
when: on_failure
paths:
- cypress/screenshots
- cypress/videos
expire_in: 1 day
.docker:
image: docker:stable
services:
......@@ -78,20 +38,16 @@ test:e2e:
script:
- docker pull $DOCKER_RELEASE_IMAGE || true
- docker build --cache-from $DOCKER_RELEASE_IMAGE --build-arg
REACT_APP_API_BASE_URL --build-arg REACT_APP_MATOMO_BASE_URL --build-arg
REACT_APP_MATOMO_SITE_ID --tag $DOCKER_CURRENT_IMAGE --tag
GITLAB_BASE_URL --build-arg GITLAB_REPOSITORY --build-arg
GITLAB_REPOSITORY_BRANCH --build-arg GITLAB_ACCESS_TOKEN --build-arg
SSHOC_OPENAPI_DOCUMENT_URL --build-arg NEXT_PUBLIC_SSHOC_BASE_URL
--build-arg NEXT_PUBLIC_SSHOC_API_BASE_URL --build-arg
NEXT_PUBLIC_RECAPTCHA_SITE_KEY --build-arg NEXT_PUBLIC_MATOMO_BASE_URL
--build-arg NEXT_PUBLIC_MATOMO_SITE_ID --tag $DOCKER_CURRENT_IMAGE --tag
$DOCKER_RELEASE_IMAGE .
- docker push $DOCKER_CURRENT_IMAGE
- docker push $DOCKER_RELEASE_IMAGE
.storybook:
script:
- docker pull $DOCKER_RELEASE_IMAGE || true
- docker build -f Dockerfile-storybook --cache-from $DOCKER_RELEASE_IMAGE
--tag $DOCKER_CURRENT_IMAGE --tag $DOCKER_RELEASE_IMAGE .
- docker push $DOCKER_CURRENT_IMAGE
- docker push $DOCKER_RELEASE_IMAGE
package:frontend:main:acdh:
stage: package
extends:
......@@ -100,7 +56,12 @@ package:frontend:main:acdh:
variables:
DOCKER_RELEASE_IMAGE: ${CI_REGISTRY_IMAGE}/frontend:latest
DOCKER_CURRENT_IMAGE: ${CI_REGISTRY_IMAGE}/frontend:$CI_COMMIT_SHORT_SHA
REACT_APP_API_BASE_URL: https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at
GITLAB_BASE_URL: https://gitlab.gwdg.de
GITLAB_REPOSITORY: sshoc/sshoc-marketplace-frontend
SSHOC_OPENAPI_DOCUMENT_URL: https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at/v3/api-docs
NEXT_PUBLIC_SSHOC_BASE_URL: https://sshoc-marketplace.acdh-dev.oeaw.ac.at
NEXT_PUBLIC_SSHOC_API_BASE_URL: https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at
# NEXT_PUBLIC_RECAPTCHA_SITE_KEY:
rules:
- if: '$CI_COMMIT_BRANCH == "main"'
......@@ -112,30 +73,13 @@ package:frontend:tags:acdh:
variables:
DOCKER_RELEASE_IMAGE: ${CI_REGISTRY_IMAGE}/frontend:release
DOCKER_CURRENT_IMAGE: ${CI_REGISTRY_IMAGE}/frontend:$CI_COMMIT_TAG
REACT_APP_API_BASE_URL: https://marketplace-api.sshopencloud.eu
REACT_APP_MATOMO_BASE_URL: https://matomo.acdh.oeaw.ac.at/
REACT_APP_MATOMO_SITE_ID: 179
rules:
- if: '$CI_COMMIT_TAG != null'
package:storybook:main:acdh:
stage: package
extends:
- .docker
- .storybook
variables:
DOCKER_RELEASE_IMAGE: ${CI_REGISTRY_IMAGE}/storybook:latest
DOCKER_CURRENT_IMAGE: ${CI_REGISTRY_IMAGE}/storybook:$CI_COMMIT_SHORT_SHA
rules:
- if: '$CI_COMMIT_BRANCH == "main"'
package:storybook:tags:acdh:
stage: package
extends:
- .docker
- .storybook
variables:
DOCKER_RELEASE_IMAGE: ${CI_REGISTRY_IMAGE}/storybook:release
DOCKER_CURRENT_IMAGE: ${CI_REGISTRY_IMAGE}/storybook:$CI_COMMIT_TAG
GITLAB_BASE_URL: https://gitlab.gwdg.de
GITLAB_REPOSITORY: sshoc/sshoc-marketplace-frontend
SSHOC_OPENAPI_DOCUMENT_URL: https://sshoc-marketplace-api.acdh.oeaw.ac.at/v3/api-docs
NEXT_PUBLIC_SSHOC_BASE_URL: https://sshoc-marketplace.acdh.oeaw.ac.at
NEXT_PUBLIC_SSHOC_API_BASE_URL: https://sshoc-marketplace-api.acdh.oeaw.ac.at
# NEXT_PUBLIC_RECAPTCHA_SITE_KEY:
NEXT_PUBLIC_MATOMO_BASE_URL: https://matomo.acdh.oeaw.ac.at/
NEXT_PUBLIC_MATOMO_SITE_ID: 179
rules:
- if: '$CI_COMMIT_TAG != null'
import '@storybook/addon-a11y/register'
import '@storybook/addon-actions/register'
import '@storybook/addon-knobs/register'
import '@storybook/addon-links/register'
import { addDecorator, addParameters, configure } from '@storybook/react'
import React from 'react'
import { GlobalStyles, ThemeProvider } from '../src/styles'
addDecorator(storyFn => (
<ThemeProvider>
<GlobalStyles />
<div style={{ margin: 20 }}>{storyFn()}</div>
</ThemeProvider>
))
addParameters({
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
})
configure(
[
require.context('../src/components', true, /\.stories\.js$/),
require.context('../src/elements', true, /\.stories\.js$/),
require.context('../src/styles', true, /\.stories\.js$/),
],
module
)
module.exports = ['@storybook/preset-create-react-app']
{
"recommendations": [
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode"
]
}
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "attach",
"name": "Next.js: Attach",
"skipFiles": ["<node_internals>/**"],
"port": 9229
},
{
"type": "pwa-node",
"request": "attach",
"name": "Next.js: Attach by Process ID",
"skipFiles": ["<node_internals>/**"],
"processId": "${command:PickProcess}"
}
]
}
{
"debug.node.autoAttach": "disabled"
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.format.enable": true,
"typescript.tsdk": "node_modules/typescript/lib",
"[typescript,typescriptreact,javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": false
},
"[markdown,mdx]": {
"files.trimTrailingWhitespace": false
}
}
# Contributing
## Code Formatting
We use `prettier` for code formatting, and run it automatically as a
commit-hook. For manual formatting run `yarn format`.
## Pull requests
We work in branches and don't include more than one feature/fix per PR. When
merging into master, we "squash and merge".
## Git Commit Messages
We follow the ["conventional commits"](https://www.conventionalcommits.org)
specification. Use `yarn cm` instead of `git commit` to get a helpful prompt
that enforces that convention.
In the commit message, we use present tense in imperative mood, e.g.
`add feature` not `added feature`, and `move cursor to ...` not
`moves cursor to ...`. Commit messages should be lower-case.
## Release
We use `standard-version` to automatically bump versions and generate a
changelog. Don't forget to run `git push --follow-tags` afterwards.
## Testing
We use `jest` as our testing framework, with `@testing-library/react` for UI
integration tests. For e2e tests we use `cypress`.
# build
FROM node:10-alpine as build
FROM node:14-alpine
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn --frozen-lockfile --production --silent
ENV PATH /usr/src/app/node_modules/.bin:${PATH}
ARG REACT_APP_API_BASE_URL
ARG REACT_APP_MATOMO_BASE_URL
ARG REACT_APP_MATOMO_SITE_ID
# git is needed for openapi-ts-client
RUN apk update && apk upgrade && apk add --no-cache git
COPY src ./src
COPY public ./public
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile --quiet
COPY . .
ARG NEXT_TELEMETRY_DISABLED=1
ARG GITLAB_BASE_URL
ARG GITLAB_REPOSITORY
ARG GITLAB_REPOSITORY_BRANCH
ARG GITLAB_ACCESS_TOKEN
ARG SSHOC_OPENAPI_DOCUMENT_URL
ARG NEXT_PUBLIC_SSHOC_BASE_URL
ARG NEXT_PUBLIC_SSHOC_API_BASE_URL
ARG NEXT_PUBLIC_RECAPTCHA_SITE_KEY
ARG NEXT_PUBLIC_MATOMO_BASE_URL
ARG NEXT_PUBLIC_MATOMO_SITE_ID
RUN yarn build
# serve
FROM node:10-alpine
COPY serve.json /usr/share
COPY --from=build /usr/src/app/build /usr/share/app
EXPOSE 3000
USER node
CMD ["npx", "serve", "-c", "/usr/share/serve.json", "-l", "3000", "-n", "-s", "/usr/share/app"]
# run docker with --init flag to handle SIGTERM/SIGKILL
CMD ["yarn", "start"]
# build
FROM node:10-alpine as build
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn --frozen-lockfile --silent
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY src ./src
COPY public ./public
COPY .storybook/ ./.storybook
RUN yarn build:storybook --quiet
# serve
FROM node:10-alpine
COPY --from=build /usr/src/app/storybook-static /usr/share/app
EXPOSE 9009
CMD ["npx", "serve", "-n", "-l", "9009", "/usr/share/app"]
# SSHOC Marketplace Frontend
# SSHOC Marketplace
## How to run
Client for the [SSHOC Marketplace](https://marketplace.sshopencloud.eu).
You can use Docker to run the app with:
## Prerequisites
```shell
docker-compose up --build -d
```
You need [`node`](https://nodejs.org/en/download/) and
[`yarn`](https://classic.yarnpkg.com/en/docs/install) installed.
The container will use [`serve`](https://github.com/zeit/serve) to serve the app
on port 3000.
## Development
Note that the app expects the backend server on port 8080.
Before starting the first time, build an API client with
`yarn create:sshoc-client`. Start the development server with `yarn dev` and
visit [http://localhost:3000](http://localhost:3000). Optionally, start a local
CMS backend with `yarn dev:cms` and access the CMS at
[http://localhost:3000/admin/index.html](http://localhost:3000/admin/index.html).
## How to contribute
## Production
Make sure you have [NodeJS](https://nodejs.org/en/) and
[Yarn](https://yarnpkg.com/lang/en/) installed.
Produce a static build with `yarn build && yarn export` and serve the `out`
folder.
Clone the repository and install the project's dependencies:
### Environment variables
```shell
yarn
```
To configure the build via environment variables, copy `.env.local.example` to
`.env.production` or `.env.local`. A `.env.local` config will _not_ be committed
to git, while `.env.{development,production}` will.
Run the development build:
- `SSHOC_OPENAPI_DOCUMENT_URL` should point to the OpenAPI document for the
SSHOC Marketplace API. Defaults to `http://localhost:8080/v3/api-docs`.
- `GITLAB_BASE_URL` and `GITLAB_REPOSITORY` should point to the frontend
repository. This will be used to get "last updated" timestamps for static
content pages. When not provided, timestamps will fall back to the current
date at build time.
- `NEXT_PUBLIC_SSHOC_BASE_URL` and `NEXT_PUBLIC_SSHOC_API_BASE_URL` should point
to frontend and backend.
- `NEXT_PUBLIC_RECAPTCHA_SITE_KEY` for ReCaptcha.
- `NEXT_PUBLIC_MATOMO_BASE_URL` and `NEXT_PUBLIC_MATOMO_SITE_ID` for analytics.
```shell
yarn start
```
### robots.txt
To run the production build locally:
By default, `robots.txt` disallows all crawlers – change this for production by
editing `scripts/sitemap.ts`.
```shell
REACT_APP_API_BASE_URL=http://localhost:8080 yarn build && yarn serve
```
### Performance metrics
Also, make sure to have either the mock server or the development build of the
backend server running at port 8080. You can start the mock server with:
Currently,
[performance metrics](https://nextjs.org/docs/advanced-features/measuring-performance)
are logged to the console. Consider editing `src/pages/_app.tsx` to send them to
an analytics service.
```shell
yarn mockserver
```
### Page metadata
Contributions should follow the [project's guidelines](/CONTRIBUTING.md).
Site metadata can be configured in `config/metadata.json`.
## Component library
## Static page content
You can view components in isolation in storybook:
Static content for the Home page, About pages, Contact page, and Privacy policy
page can be edited on
[/admin/index.html](http://localhost:3000/admin/index.html).
```shell
yarn start:storybook
```
## Docker
To run a static storybook build:
```shell
yarn build:storybook && yarn serve:storybook
```
Or simply run the Docker container:
```shell
docker-compose -f docker-compose-storybook.yml up --build -d
```
Storybook will run on port 9009.
## Previews
A development version of the client is deployed at
[https://sshoc-marketplace.acdh-dev.oeaw.ac.at](https://sshoc-marketplace.acdh-dev.oeaw.ac.at)
A storybook instance is deployed at
[https://sshoc-marketplace-storybook.acdh-dev.oeaw.ac.at](https://sshoc-marketplace-storybook.acdh-dev.oeaw.ac.at)
You can build a container with `docker-compose build`, and run locally with
`docker-compose up`, then visit [http://localhost:3000](http://localhost:3000).
Build configuration should be provided via `.env` file (see
`.env.local.example`).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.708 10.708"><path d="M6.654 5.354l4.053 4.053-1.3 1.3-4.053-4.052-4.053 4.053-1.3-1.3 4.053-4.054L0 1.301l1.3-1.3 4.054 4.053L9.407.001l1.3 1.3z" fill="#045a92"/></svg>
\ No newline at end of file
<svg version="1.0" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 85.039 85.039" xml:space="preserve"><style>.st0{opacity:.38;fill:#494949}.st11{fill:#fff}.st13{fill:#5ab769}</style><path class="st0" d="M73.721 47.345v-3.188c0 .004-.003.01-.004.014V28.503c-.003.016-.016.042-.02.06h-.042c.025-.132.062-.263.062-.398 0-3.617-9.06-6.55-20.234-6.55-11.175 0-20.234 2.933-20.234 6.55 0 .135.037.266.062.398-.022-.115-.06-.228-.062-.345v4.012h-.009c0 .017.008.035.009.052V44.01v-.19c.003.117.04.23.062.346v.03c-.02-.108-.056-.214-.058-.323v4.012h-.008c0 .017.007.034.008.052v11.728-.19c.09 3.593 9.106 6.496 20.226 6.496 10.21 0 18.631-2.45 20.013-5.632.1-.185.16-.341.198-.474.006-.067.031-.133.031-.2v-12.32c0 .01-.002.018-.004.027.002-.01.004-.018.004-.027z"/><path d="M43.837 9.715l-.009.004a2.451 2.451 0 01-1.222 2.044l-25.492 14.9c-.209.087-.587.534-.008.864l1.727.999.478.273L40.78 41.237l1.752 1s1.322.642 1.276 2.502l.023 2.703.007-37.727z" fill="#124f1a"/><ellipse cx="53.029" cy="27.823" rx="20.234" ry="6.549" fill="#89e899"/><path class="st11" d="M53.021 34.372c-11.12 0-20.137-2.903-20.226-6.496v3.473c0 3.617 9.06 6.549 20.234 6.549 11.175 0 20.234-2.932 20.234-6.55V28.16a2.04 2.04 0 01-.23.58c-1.38 3.182-9.801 5.632-20.012 5.632z"/><path d="M53.03 37.898c-11.176 0-20.235-2.932-20.235-6.55V30.05v13.62-.19c.09 3.592 9.107 6.496 20.226 6.496 10.21 0 18.631-2.45 20.013-5.632.1-.185.161-.342.198-.475.006-.067.031-.132.031-.2v-12.32c0 3.618-9.06 6.55-20.234 6.55z" fill="#66dd7a"/><path class="st13" d="M53.03 37.898c-10.613 0-19.301-2.646-20.15-6.01h-.093c0 3.617 9.059 6.55 20.234 6.55 11.175 0 20.234-2.933 20.234-6.55v-.486c-.09 3.592-9.106 6.496-20.226 6.496z"/><path class="st11" d="M53.025 50.027c-11.12 0-20.136-2.904-20.226-6.496v3.472c0 3.617 9.06 6.55 20.234 6.55 11.175 0 20.234-2.933 20.234-6.55v-3.188a2.04 2.04 0 01-.229.58c-1.381 3.182-9.802 5.632-20.013 5.632z"/><path class="st13" d="M53.033 53.553c-11.175 0-20.234-2.933-20.234-6.55v-1.3 13.62-.19c.09 3.593 9.107 6.497 20.226 6.497 10.21 0 18.632-2.45 20.013-5.632.1-.185.161-.342.198-.475.007-.067.031-.133.031-.2v-12.32c0 3.617-9.059 6.55-20.234 6.55z"