Procedura per configurare un ambiente di sviluppo React + TypeScript + Vite in Docker e introdurre Storybook

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

Struttura delle directory all’inizio
Creazione di un progetto React+TypeScript
Nel contenitore, eseguire npm install
Introduzione di StoryBook
Verifica dello schermo

Struttura delle directory all’inizio

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

Creazione di un progetto React+TypeScript

Nella directory docker, eseguire il seguente comando:

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

Premere ‘y’ per selezionare le impostazioni della lingua e della compilazione, e il progetto verrà creato.

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

Nel contenitore, eseguire npm install

Avviare il contenitore Docker ed entrare in esso.

Successivamente, eseguire npm install, npm run build e npm run dev.

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

Il progetto React + TypeScript + Vite è ora completo.

http://localhost:5173/

Introduzione di StoryBook

Successivamente, introdurremo StoryBook.

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

Dopo aver avviato il contenitore, inserire il comando di esecuzione.

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

$ npm run storybook

Se viene visualizzato un output simile a questo, eseguire npm run storybook.

(Tenere presente che dopo aver inserito il comando npx sb@latest init, ci vorrà del tempo, quindi attendere un momento).

Una volta completata la compilazione con npm run storybook, verrà visualizzato un output come questo.

Verifica dello schermo

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

Con questo, la creazione del progetto è completata.

Se avete domande o altro, vi preghiamo di lasciare un commento nella sezione commenti.

daigoro

大阪のエンジニアが書いているブログ。