Zenn
🦔

Docker環境にReact✖️Typescript✖️tailwindcssのアプリを作成する

2023/12/23に公開
Docker
Node.js
React
TypeScript
Tailwind CSS
tech

はじめに

こちらに移行しました🙇
https://kubodai-code.com/spring-react6/

バックエンドにSpringBoot3(REST API)フロントエンドにReactを使用してSNS風のWebアプリケーションを作っていきます。
勉強も兼ねて記録に残したいと思いますので誰かの役に立てば嬉しいです😊

今パートの目標

前回はReactアプリを起動できDocker環境の構築をしました。
今回はその環境にReact✖️Typescript✖️tailwindcssのアプリを作成していきたいと思います。
https://zenn.dev/pandaman/articles/98df77aaa20f52

環境について

  • react 18.2.0
  • Typescript 4.9.5
  • Node.js 21
  • tailwindcss 3.4.0
  • macOS Sonoma 14.1.1
  • Docker Desktop 4.18.0

Reactアプリを作成する

Dockerイメージを作成する

まずは、前回作成したDockerファイルを元にDockerイメージを作成します。

cd ~/develop/share-favplace-front 
share-favplace-front % docker-compose build

DockerDesktopまたはCLIで一応確認しておきましょう。

share-favplace-front % docker image ls

REPOSITORYが{コンテナ名}-{サービス名}となっているものがあれば作成できています。

Reactアプリを作成する

Dockerイメージが作成できたらReactアプリを作成していきます。

share-favplace-front % docker-compose run --rm front npx create-react-app share-favplace-front --template typescript

コマンドの説明をしていきます

docker-compose run <サービス名> <コマンド>

Dockerコンテナを作成し、コンテナ内で引数に渡したコマンドを実行します。
今回でいえば以下コマンドです。

npx create-react-app share-favplace --template typescript
--rm

コマンドを実行した後コンテナを削除するというオプションです。

npx create-react-app　<アプリ名> --template typescript

引数に渡したアプリ名でReactアプリを作成するコマンドです。

--template typescript

Typescriptを使用するアプリを作成する際のオプションです。

コマンドを実行すると以下のように聞かれるのでyを入力しEnterを押します。

Ok to proceed? (y)

以下メッセージが出力され、コマンド実行時に指定したフォルダ名のアプリが作成されていればOKです。

Creating a new React app in <アプリのフォルダパス>

Typescriptの設定をする。

以下に従って型定義をインストールします。
https://create-react-app.dev/docs/adding-typescript/
'''
share-favplace-front % docker-compose run --rm front npm install --save typescript @types/node @types/react @types/react-dom @types/jest
'''

Reactアプリを移動する

Reactアプリを作成できましたが、今回はDockerファイルなどを作成する際に先にアプリフォルダを作成してしまっているので「アプリフォルダ/アプリフォルダ」のような構成になってしまっているかと思います。
なので、以下コマンドで一つにまとめます。

# ファイル移動
share-favplace-front % mv アプリフォルダ/{*,.*} ./
# フォルダ削除
share-favplace-front % rmdir アプリフォルダ

Reactアプリを起動する

下記コマンドでコンテナを作成＆Reactを起動します。

share-favplace-front % docker-compose up -d

しばらく待って、Reactが起動した後、Webブラウザでhttp://localhost:3000を開きます。
以下画面が表示されればOKです。

tailwindcssをインストールする

以下に載っている通りにtailwindcssをインストールします
https://tailwindcss.com/docs/guides/create-react-app

  1. tailwindcssをインストールする
share-favplace-front % docker-compose run --rm front npm install -D tailwindcss
share-favplace-front % docker-compose run --rm front npx tailwindcss init
  1. tailwind.config.tsxを編集する
tailwind.config.tsx
/** @type {import('tailwindcss').Config} */
module.exports = {
+ content: [
+   "./src/**/*.{js,jsx,ts,tsx}",
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. index.cssを編集する
index.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

以上でインストール＆設定完了です。

Reactアプリを起動し、確認する

まず、確認用にApp.tsxを編集します。

App.tsx
export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Webブラウザでhttp://localhost:3000を開きます。
以下画面のように表示され、font-boldなどのCSSが適用されていることが確認んできればOKです。

まとめ

今回はDocker環境にReact✖️Typescriptのアプリケーションを作成し、tailwindcssのインストールを行ないました。
次回はgithubにリポジトリを作成し、apiとfrontのソースコードをgit管理していきたいと思います。

Discussion