create-react-app用のカスタムテンプレート

概要

create-react-appを使って簡単にReactプロジェクトを生成することができます。create-react-appは--templateオプションを提供して既に作ってあるテンプレートを活用できる機能を提供してます。

create-react-appは基本的TypeScript用のテンプレートを提供してます。

cra-template-typescript

それで、私たちはcreate-reat-appコマンドを使って次のようにTypeScriptが適用されたReactプロジェクトを簡単に生成することができます。

npx create-react-app [YOUR_PROJECT_NAME] --template typescript

今回のブログポストではcreate-react-appのテンプレート機能を活用して自分のテンプレートを作る方法について説明します。

公式ドキュメント: Custom Templates

create-react-app テンプレートプロジェクト生成

create-react-appのテンプレートを作るためにはプロジェクトを生成する時cra-template-のprefixを付けってReactプロジェクトを生成する必要があります。

npx create-react-app cra-template-[テンプレート名]

私はcra-template-dekuと言う名前でプロジェクトを生成しました。

npx create-react-app cra-template-deku

このように生成したテンプレートプロジェクトはNPM(Node Package Manager)にデプロイする予定です。従って下記のコマンドを実行して重複した名前のパッケージがデプロイされてるか確認します。 이렇게 생성한 템플릿 프로젝트는 NPM(Node Package Manager)에 배포할 예정입니다. 따라서 다음 명령어를 실행하여 중복된 이름의 패키지가 배포되었는지 확인합니다.

npm info cra-template-[テンプレート名]

もし、次のように同じ名前のパッケージが既に存在する場合、他の名前でプロジェクトを生成する必要があります。

[email protected] | MIT | deps: none | versions: 2
DeKu template for create-react-app
https://github.com/dev-yakuza/cra-template-deku

keywords: react, create-react-app, cra, template

dist
.tarball: https://registry.npmjs.org/cra-template-deku/-/cra-template-deku-0.0.2.tgz
.shasum: 89c7f5797c9bf12cfa45dee3de7c29867cc8e371
.integrity: sha512-9HAfk9OkBVfaJHcoIjuCZhQry64UU4OOlNNmUYvhtXrr0xoxzeq6jo1OgjU97Fav2kkyjmYupgmy4GYNAWWFHQ==
.unpackedSize: 275.8 kB

maintainers:
- dev-yakuza <[email protected]>

dist-tags:
latest: 0.0.2

published yesterday by dev-yakuza <[email protected]>

もし、次のように404エラーが発生したら、その名前でプロジェクトを進めても大丈夫です。

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/cra-template-yakuza - Not found
npm ERR! 404
npm ERR! 404  'cra-template-yakuza@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /.npm/_logs/2023-10-22T06_20_21_911Z-debug-0.log

Reactプロジェクトカスタマイズ

このように生成したプロジェクトで必要なライブラリをインストールして、例題コード、プロジェクト構造など自分がテンプレート化したスタイルでプロジェクトを構成します。

私は次のようなライブラリをインストールしました。

React UI library: MUI, Emotion
Component driven development: Storybook
Calling API: Axios, React Query
State management: Recoil
Routing: React Router
i18n: react-i18next

そして次のようなフォルダを構成しました。

cra-template-deku
├── public
├── src
│   ├── api
│   ├── components
│   │   ├── atoms
│   │   ├── molecules
│   │   ├── organisms
│   │   ├── pages
│   │   └── templates
│   ├── data
│   ├── locales
│   ├── types
│   ├── utils
│   └── ...
└── ...

package-lock.jsonファイルとnode_modules

テンプレート構成が完了したら、次はいらないファイルとフォルダを削除する必要があります。package-lock.jsonとnode_modulesフォルダは要らないので次のコマンドを実行して削除します。

rm -rf package-lock.json node_modules

templateフォルダ

現在Reactプロジェクトをテンプレートとして提供するためにはtemplateフォルダを生成して全てのファイルやフォルダを移動させる必要があります。

templateフォルダを作ってpackage.jsonファイル以外の全てのものを該当フォルダへ移動させます。そしたらテンプレートプロジェクトは次のような構造をもつくとになります。

cra-template-deku
├── package.json
└── template
    ├── README.md
    ├── .gitignore
    ├── public
    ├── src
    └── tsconfig.json

.gitignore

templateフォルダ中の.gitignoreファイルはgitignoreで名前を変更する必要があります。名前を変更したいとそのテンプレートを使ってプロジェクトを生成する時、次のようなエラーが発生します。

Error: ENOENT: no such file or directory, open '/projects/temp/gitignore'
    at Object.openSync (node:fs:592:3)
    at Object.readFileSync (node:fs:460:35)
    at module.exports (/projects/temp/node_modules/react-scripts/scripts/init.js:260:21)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:122:12)
    at Object.runInThisContext (node:vm:298:38)
    at node:internal/process/execution:83:21
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:82:62)
    at evalScript (node:internal/process/execution:104:10) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/projects/temp/gitignore'

従って.gitignoreファイル名を必ず.を除いてgitignoreで変更する必要があります。

cra-template-deku
├── package.json
└── template
    ├── README.md
    ├── gitignore
    ├── public
    ├── src
    └── tsconfig.json

template.json

テンプレートプロジェクトを構成するためインストールしたライブラリは現在package.jsonファイル中に記録されてます。この内容をtemplate.jsonファイルを生成してそのファイル中に移動させる必要があります。

template.jsonファイルを生成して次のように修正します。

{
  "package": {
  }
}

そしてpackage.jsonファイル中へカスタム化した部分を切り取って次のようにファイル中に貼り付けます。

{
  "package": {
    "scripts": {
      ...
    },
    "dependencies": {
      ...
    },
    "devDependencies": {
      ...
    },
    "eslintConfig": {
      ...
    },
    "jest": {
      ...
    }
  }
}

私はテンプレートプロジェクトを生成する時、特定コマンド(ex> ESLint、Prettierなど)を追加したためpackage.jsonファイル中のscriptsも切り取って貼り付けました。

また、開発に必要なライブラリ、プロジェクトを構成するため色んなライブラリをインストールしたので、dependenciesとdevDependenciesも切り取って貼り付けました。

最後にpackage.jsonファイル中で設定した内容(eslintConfigとjest)も切り取って貼り付けました。

このようにtemplate.jsonファイルで必要な内容を移したら、package.jsonファイルは次のような内容だけ残ります。

{
  "name": "cra-template-deku",
  "version": "0.1.0",
  "private": true,
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

今のところファイル、フォルダ構造は次のような形になります。

cra-template-deku
├── package.json
├── template
│   ├── README.md
│   ├── gitignore
│   ├── public
│   ├── src
│   └── tsconfig.json
└── template.json

テスト

これでcreate-react-app用のカスタムテンプレートの準備が終わりました。次はこのテンプレートが上手く動作するのか確認する必要があります。

現在作業中のフォルダの外で次のコマンドを実行してカスタムテンプレートが上手く動作するのか確認します。

npx create-react-app [YOUR_REACT_PROJECT_NAME] --template file:./cra-template-deku

そしたら次のようにプロジェクトが上手く生成されることが確認できます。

Creating a new React app in /projects/temp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-deku...


added 1463 packages in 2m

242 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.

added 1139 packages, and changed 4 packages in 2m

514 packages are looking for funding
  run `npm fund` for details

Removing template package using npm...


removed 1 package, and audited 2603 packages in 8s

514 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created temp at /projects/temp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd temp
  npm start

Happy hacking!

もし、上のようにプロジェクトが上手く生成されなくエラーが発生したら、そのエラーを解決する必要があります。そのエラーを解決しなくてカスタムテンプレートをデプロイしても上手く動作しないようになります。

デプロイ準備

create-react-app用のカスタムテンプレートが完成しました。次はこのプロジェクトをNPMにデプロイして使えるようにする必要があります。

次はデプロイをするため必要なファイルを追加したフォルダ構造になります。

cra-template-deku
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── template
│   ├── README.md
│   ├── gitignore
│   ├── public
│   ├── src
│   └── tsconfig.json
└── template.json

ルーツフォルダにあるpackage.jsonとREADME.mdファイルはNPMにデプロイするためのファイルです。--templateオプションでプロジェクトを生成する時にはこの内容は含まれません。

逆にtemplateフォルダ中にあるREADME.mdファイルは--templateオプションで生成したReactプロジェクトに含まれることになります。

デプロイ

オープンソースをNPMにデプロイする方法については次のブログポストを参考してください。

NPMに自分のライブラリを配布する

完了

これでcreate-react-appでReactプロジェクトを生成する時、使えるカスタムテンプレートを生成する方法について見てみました。皆さんも自分のテンプレートを作成してcreate-react-appでReactプロジェクトを生成する時、自分のテンプレートを活用できるようにしてみてください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！