Skip to content

Commit

Permalink
build(docker): add docker for easily bootstrapping dev env
Browse files Browse the repository at this point in the history
Changes:
- Added docker for setting up dev frontend
- Tweaked release/build system to remove building artifacts on release
- Changed proxy settings to allow proxying to different backends
- Added ability to set settings via .env file

Signed-off-by: Danil Kostromin <[email protected]>
  • Loading branch information
Danil Kostromin committed Jan 12, 2024
1 parent 5bd5778 commit fbacfef
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 155 deletions.
74 changes: 29 additions & 45 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -1,45 +1,29 @@
name: CI
on:
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20]
steps:
- name: Code Checkout
uses: actions/checkout@v4
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
- name: Code Testing
run: pnpm run test
lint:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20]
steps:
- name: Code Checkout
uses: actions/checkout@v4
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
- name: Code Linting
run: pnpm run lint
name: CI
on:
pull_request:
branches: [main]
env:
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20]
steps:
- name: Code Checkout
uses: actions/checkout@v4
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Code Linting
run: pnpm run lint
- name: Code Testing
run: pnpm run test
8 changes: 5 additions & 3 deletions .github/workflows/create-release-build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ on:
type: boolean
description: Dry release
default: false
env:
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
jobs:
test:
runs-on: ubuntu-latest
Expand All @@ -37,7 +39,7 @@ jobs:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
run: pnpm install
- name: Code Testing
run: pnpm run test
lint:
Expand All @@ -57,7 +59,7 @@ jobs:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
run: pnpm install
- name: Code Linting
run: pnpm run lint
release:
Expand All @@ -83,7 +85,7 @@ jobs:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
run: pnpm install
- name: Create release
run: pnpm run release --ci --verbose $TYPE_ARG $BETA_ARG $DRY_ARG
env:
Expand Down
4 changes: 2 additions & 2 deletions .release-it.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
"requireBranch": "main",
"commitMessage": "chore(release): v${version}",
"tagName": "v${version}",
"addUntrackedFiles": true
"addUntrackedFiles": true
},
"github": { "release": true, "releaseName": "v${version}" },
"hooks": {
"before:init": [],
"after:bump": ["pnpm run git-info", "pnpm run bublik:ci:build"],
"after:bump": ["pnpm run git-info"],
"after:@release-it/conventional-changelog:bump": "pnpm run create-mdx-changelog \"${changelog}\"",
"after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
},
Expand Down
96 changes: 18 additions & 78 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,84 +1,30 @@
[SPDX-License-Identifier: Apache-2.0]::
[SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd.]::

# Bublik UI

## Package manager

We use pnpm as our package manager so to start you will need to install it, please refer to [pnpm documentation](https://pnpm.io/) for installing instructions

All commands should be run like this `pnpm exec nx ...etc` or you can add alias to your .bashrc like this `alias pnx="pnpm nx --"`, then you can run like this `pnx ...`

## Monorepo tools

We use [Nx](https://nx.dev/getting-started/intro) for monorepo, you would need to install nx cli globally or run commands via `npx` or `pnpm dlx...`

## Project structure

```
📦 dist
┣ 📂 apps - Built production ready applications
📦 apps
┣ 📂 bublik - Bublik UI Application
📦 libs
┣ 📂 bublik - Bublik UI application specific libs
┃ ┣ 📂 +state - Redux state
┃ ┣ 📂 config - Different Bublik UI configs (needed for UI to work correctly)
┃ ┣ 📂 features - Specific Bublik UI featires implementation
┃ ┣ 📂 router - Router helpers, encoding/decoding search params
┣ 📂 env - Env helper lib
┣ 📂 services - General services for data-access
┃ ┗ 📂 bublik-api - Bublik API hooks/methods (RTK Query)
┣ 📂 shared - Shared libraries for multiple apps to consume
┃ ┣ 📂 charts - Apache Echarts components
┃ ┣ 📂 hooks - Shared react hooks
┃ ┣ 📂 icons - UI Icons
┃ ┣ 📂 tailwind-ui - Shared UI components
┃ ┣ 📂 types - Shared interfaces and types
┃ ┣ 📂 utils - Shared general utils
```

## Config
## Before you start (skip if you want to run via docker)

To create new Bublik UI frontend for deployment you would need to follow these steps:
1. Make sure you installed [pnpm](https://pnpm.io/)
2. Make sure you installed [nx](https://nx.dev/getting-started/installation#installing-nx-globally) globally
3. Make sure you installed [docker](https://docs.docker.com/desktop/) (you can install docker desktop or just docker engine)
4. Create env file `apps/bublik/.env.local` (see `apps/bublik/.env.local.example` for reference)

1. Add needed configuration to `apps/bublik/project.json`
2. `base` - where the app will be mounted it **must start with `/`** and **no** trailing slash at the end
### To test everything working run following commands

Example:
1. `pnpm -v`
2. `nx --version`
3. `docker version`

```json
{
"demo": {
"base": "/prefix",
"outputPath": "dist/apps/bublik-app"
}
}
```
## Run locally (run with docker)

## Local development
You would need to name your image ${YOUR_IMAGE_NAME} replace with your value in below commands
You can run UI the following way:

Make sure you installed nrwl [nx monorepo tools](https://nx.dev/getting-started/intro)
Example: 'pnpm add -g nx'
1. Create env file `apps/bublik/.env.local` (see `apps/bublik/.env.local.example` for reference)
2. Build image `docker build -f apps/bublik/Dockerfile.dev . -t ${YOUR_IMAGE_NAME}`
3. Run image `docker run -it --rm -p 4200:4200 -v $(pwd):/app -v /app/node_modules --env-file apps/bublik/.env.local ${YOU_IMAGE_NAME}`
> If your backend is served from localhost you need to run container on host network
> Add flag --network host to run image command
To start development, please follow this steps:

1. Clone repo
2. Run `pnpm install` to install dependencies
3. Run `pnpm start` to start development server

## Commands

- `pnpm start` - starts Bublik UI in development mode
- `pnpm test` - runs tests in parallel for all projects
- `pnpm bublik:serve:prod` - starts Bublik UI in production mode
- `pnpm bublik:storybook` - starts storybook for Bublik UI
- `pnpm bublik:build-storybook` - builds storybook for Bublik UI
- `pnpm bublik:ci:build` - builds all Bublik UI application in production mode

## Misc

- If you want to connect to particular backend remote or local you can proxy all you requests with `apps/bublik/vite.config.ts`
> If you add new dependencies to package.json you need to rebuild image
## Common errors and solutions

Expand All @@ -92,9 +38,3 @@ To start development, please follow this steps:
- try adding lib/app path to `libs/shared/storybook/.storybook/main.js`
- Storybook tailwind classes not working
- try removing `node_module` and installing with `pnpm install`

## Release

We are using release-it to automate releases. To release new version of Bublik UI you need to run `pnpm release` and follow the instructions.
Or run `pnpm release -- --dry-run` to see what will be done.
You can also release from GitHub actions menu specifying what type of release you want to do.
18 changes: 14 additions & 4 deletions apps/bublik/.env.local.example
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
# Username and password used to proxy requests to JSON logs
BUBLIK_UI_DEV_LOGS_AUTH="<USERNAME>:<PASSWORD>"
# This configuration is necessary for proper proxying of requests to django backend

#####################################################
# Example for connecting to ts-factory
# BUBLIK_UI_DEV_LOGS_TARGET=https://ts-factory.io
# BUBLIK_UI_DEV_BACKEND_TARGET=https://ts-factory.io
# URL_PREFIX=/bublik/v2

#####################################################
# This examples shows how to setup env for frontend served from `http://localhost/prefix/v2`
# Target of JSON logs (protocol, host, port)
BUBLIK_UI_DEV_LOGS_TARGET="https://example.com"
BUBLIK_UI_DEV_LOGS_TARGET=http://localhost
# Where backend is served (protocol, host, port)
BUBLIK_UI_DEV_BACKEND_TARGET="http://localhost:8000"
BUBLIK_UI_DEV_BACKEND_TARGET=http://localhost
# Adds prefix from where backend is served e.g (http://localhost/prefix/api/v2)
URL_PREFIX=/prefix/v2
1 change: 1 addition & 0 deletions apps/bublik/.gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Local
.env.local
.env
21 changes: 12 additions & 9 deletions apps/bublik/Dockerfile.dev
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
FROM node:17.9.0
FROM node:20-slim AS base

ENV PNPM_HOME="/root/.local/share/pnpm"
ENV PATH="${PATH}:${PNPM_HOME}"
ARG PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

RUN npm install --global pnpm
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN pnpm add -g nx
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=${PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD}
ENV BASE_URL="/v2"

RUN corepack enable

COPY . /app
WORKDIR /app

COPY package.json pnpm-lock.yaml ./
RUN pnpm install
FROM base as runner

COPY . .
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install

EXPOSE 4200

CMD ["pnpm", "run", "nx", "serve", "--host=0.0.0.0"]
CMD ["pnpm", "run", "nx", "serve", "--host=0.0.0.0", "--base=${BASE_URL}"]
Loading

0 comments on commit fbacfef

Please sign in to comment.