LoginSignup
3

More than 3 years have passed since last update.

open-wc 開発 with Docker

Posted at

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窓でリアルタイムに色々出してくれる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3