Procedimiento para construir un entorno de desarrollo de React + TypeScript + Vite en Docker e introducir Storybook

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

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

React StoryBook TypeScript

Estructura de directorios al inicio

.
└ 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"

Creación de un proyecto React+TypeScript

En el directorio docker, ejecute el siguiente comando:

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

Presione ‘y’ para seleccionar la configuración de idioma y compilación, y se creará el proyecto.

(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 %

En el contenedor, ejecute npm install

Levante el contenedor Docker y acceda al contenedor.

Luego, ejecute npm install, npm run build y npm run dev.

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

El proyecto de React + TypeScript + Vite está completo.

http://localhost:5173/
React Vit TypeScript

Introducción de StoryBook

A continuación, vamos a introducir StoryBook.

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

Después de iniciar el contenedor, ingrese el comando de ejecución.

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

$ npm run storybook

Si ve una salida como esta, ejecute npm run storybook.

(Tenga en cuenta que después de ingresar el comando npx sb@latest init, llevará algún tiempo, así que espere un momento).

npx sb@latest init

Cuando se complete la compilación con npm run storybook, verá una salida como esta.

ビルド完了

Verificación de la pantalla

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

Con eso, la creación del proyecto está completa.

Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios.

クリックしたら、
楽天モバイル大盤振る舞いのキャンペーン中らしいです (本ブログ管理人は楽天モバイル2台持ちです) 楽天モバイル
DockerReact
daigoroをフォローする

コメント

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