create-react-appで作成したプロジェクトのソースルート(src)を変更する方法

はじめに

Reactの環境を簡単に作成する場合は create-react-app が便利で良く使うのですが、 SpringBoot + Reactのプロジェクトを作成しようとした際もWebpackをゴリゴリ書くのが面倒臭かったのでcreate-react-appを使って作成しようと考えていました。

ただSpringBootのソースルートとcreate-react-appのソースルートがどちらも「src」フォルダになっていてリポジトリを共有する際に困ったのでcreate-react-appで作成したプロジェクトのソースルートを変更する方法を調べました。

isomorphicな環境にしたかったので「server」、「client」フォルダを作成して、みたいなのはしたくなかったのでReactの「src」フォルダの中身だけを「client」フォルダに移動する方法を調べました。

結論から述べると react-app-rewired を使用すると簡単に変更できました。

前提条件

$ npx create-react-app --version
4.0.3

react-app-rewiredをイストールする

以下コマンドでreact-app-rewiredをインストールします。

npm install -D react-app-rewired

yarn add -D react-app-reqired

create-react-appはガチガチに書かれていてあまり設定を変更できないのですが、react-app-rewiredを使用するとcreate-react-appの設定を上書きして実行することができるようになります。

上書き用の設定ファイルを作成する

ルートフォルダにconfig-overrides.jsを作成して以下を記載します。 今回は「src」フォルダを「client」フォルダに変更したいのでそれ用の設定を載せますがお好きなように変更してください。

Typescriptを使用している場合

const path = require('path');
module.exports = {
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, 'client/index.tsx');
    paths.appSrc = path.resolve(__dirname, 'client');
    paths.appTypeDeclarations = path.resolve(__dirname, 'client/react-app-env.d.ts');
    return paths;
  }
};

Typescriptを使用していない場合

const path = require('path');
module.exports = {
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, 'client/index.js');
    paths.appSrc = path.resolve(__dirname, 'client');
    return paths;
  }
};

Typescriptを使用している場合はtsconfig.jsonも修正してください。

{
  ...,
  "include": [
-    "src"
+    "client"
  ]
}

package.jsonを修正する

最後にpackage.jsonを修正します。 react-app-rewiredを経由してreact-scriptsを動かすようにします。

{
  ...,
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-app-rewired start",
+    "build": "react-app-reqired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

あとはstartやbuildが正常に動けば完了となります。

さいごに

実はいうとcreate-react-appも良くわからないまま使っていた部分もあるので軽く調べていたらnpm run ejectを実行して設定を書き換えると出来るよというのがどこかに書いてあって、 いざ実行してみるととんでもない量のファイルが作成されて確かに変更出来るかもしれないけど。。。となりました。

ただcreate-react-appを使用するとそれだけのことをコマンド一発で出来るようにしてくれているのでやっぱり便利だなと思いました。

なかでどういう設定が書かれているかを知らないままというのも気持ちが悪いので時間があれば細かく調べてみたいと思いました。