在Docker中构建React + TypeScript + Vite的开发环境,并引入Storybook的步骤

React StoryBook TypeScript Docker
この記事は約3分で読めます。

この記事の最終更新日: 2023年4月16日

React StoryBook TypeScript

初始目录结构

.
└ docker
|     └ Dockerfile
└ docker-compose.yml

Dockerfile

FROM node:19.8.1

WORKDIR /data/src

RUN npm install -g npm@latest && npm install -g vite@latest

docker-compose.yml

version: '3'
services:
  app:
    build: ./docker
    container_name: front
    tty: true
    volumes:
      - ./src:/data
    ports:
      - "5173:5173"
      - "6006:6006"

创建React+TypeScript项目

在docker目录上运行以下命令:

$ docker-compose build
$ docker-compose run --rm app npm create vite@latest .

按’y’选择语言和构建设置,项目将被创建。

(base) react-ts % docker-compose run --rm app npm create vite@latest .
[+] Running 1/1
 ⠿ Network ln-sb_default  Created                                                                                                                                                0.1s
Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /data/src...

Done. Now run:

  npm install
  npm run dev

(base) react-ts %

在容器上运行npm install

启动Docker容器并进入容器。

然后执行npm install,npm run build和npm run dev。

$ docker-compose up -d
$ docker exec -it front sh
$ npm install
$ npm run build
$ npm run dev

React + TypeScript + Vite的项目现已完成。

http://localhost:5173/
React Vit TypeScript

引入StoryBook

接下来我们将引入StoryBook。

$ docker-compose up -d
$ docker exec -it front sh

启动容器后,输入执行命令。

$ npx sb@latest init
Need to install the following packages:
  sb@7.0.2
Ok to proceed? (y)

$ npm run storybook

如果看到这样的输出,那么运行npm run storybook。

(在输入npx sb@latest init命令后需要等待一段时间,请耐心等待。)

npx sb@latest init

使用npm run storybook构建完成后,将出现如下输出。

ビルド完了

检查屏幕

http://localhost:6006/?path=/docs/example-button–docs

至此,项目创建已经完成。

如果您有任何问题,请随时在评论栏中留言。

コメント

タイトルとURLをコピーしました