open-wcというプロジェクトがある。
open-wc自体は、(デフォルトは)lit-elementを使って、webcomponentを開発するベストプラクティスを開発者に提供しようという感じのプロジェクト。
でも、今回はそこは主眼ではない。
このプロジェクト、フロントエンド開発環境としてやばいぐらいリッチなので最近使い始めている。
- test
- karma
- snapshot testing
- coverage
- storybook
- demo server
これら設定済で完備である。
このプロジェクトのscafoldがコマンド一発でできるのだから素晴らしい。
んで、開発用ツールのWebサーバーをdocker-composeでポンと一発で起動したら素敵だと思ったので書いてみました。
(open-wcのusage)
open-wcの導入(公式見たほうが早い)
$ npm init @open-wc
> ✔ What would you like to do today? › Scaffold a new project
> ✔ What would you like to scaffold? › Web Component
> ✔ What would you like to add? › Linting, Testing, Demoing
> ✔ Would you like to scaffold examples files for? › Testing, Demoing
> ✔ What is the tag name of your application/web component? … hoge-piyo
> npm init @open-wc --destinationPath /hoge-piyo --type scaffold --scaffoldType wc --features linting testing demoing --scaffol
dFilesFor testing demoing --tagName hoge-piyo --writeToDisk true --installDependencies false
Dockerのための設定
ここから以下を調整する
es-dev-server.config.js
module.exports = {
hostname: "0.0.0.0",
port: Number(process.env.PORT)
};
Dockerfile
FROM node:lts
RUN \
# for karma test
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
&& echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list \
&& apt-get update -y && apt-get install -y google-chrome-stable \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . ./
CMD [ "npm", "start" ]
docker-compose.yml
version: '3.7'
volumes:
node_modules: {}
services:
app: &app
build: .
volumes:
- .:/app
- /app/node_modules
command:
- bash
tty: true
demo: &demo
<<: *app
environment:
PORT: 8000
ports:
- 8000:8000
entrypoint:
- npm
- run
command:
- start
test:
<<: *app
command:
- npm
- run
- test:watch
- --
- --coverage
coverage:
<<: *demo
depends_on:
- test
environment:
PORT: 8001
ports:
- 8001:8001
entrypoint:
- npx
- es-dev-server
- --root-dir
- coverage
- --watch
storybook:
<<: *demo
environment:
PORT: 8002
ports:
- 8002:8002
command: storybook
このプロジェクトの使い方
サービス起動用ターミナル窓
$ docker-compose up -d
$ open http://localhost:8000/demo/ # demo
$ open http://localhost:8001 # coverage
$ open http://localhost:8002 # storybook
$ docker-compose log -f test # test watching
# $ docker-compose down -v # 終わるとき
ブラウザが3窓でリアルタイムに色々出してくれる。