━目次━
create-react-app便利ですよね。サクッとReactでフロント作りたいときは重宝します。
ただデフォルトだとソースが全て「src」フォルダの配下に展開されてしまうので、如何せんバックエンドとリポジトリを共有する際などは困ったりします。
自分の場合はバックエンドをLaravel、フロントをReactで開発する際にsrcフォルダがかぶってしまい喧嘩しました。それはもう殴り合いの。
皆さんにはそんなことになって欲しくないので備忘として共有します。
やり方さえ覚えれば簡単にフォルダ名を任意のものに変更することができます！
じゃけぇ いってみよ〜
react-app-rewiredをインストールする
まずは以下のライブラリを追加します。
・yarnの場合
|
1 |
yarn add react-app-rewired --dev |
・npmの場合
|
1 |
npm install react-app-rewired --save-dev |
react-app-rewiredを使うことで、create-react-appで作成したアプリの設定をオーバーライドすることができます。
オーバーライド設定を記述したファイルを準備する
次にルートフォルダの直下(srcフォルダと同階層)にconfig-overrides.jsという名前のファイルを作成します。
作成したら、以下のように記述します。
※srcをclientという名前に変更したい場合
※TypeScriptを使用している場合
|
1 2 3 4 5 6 7 8 9 10 |
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を使用していない場合は以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
const path = require('path'); module.exports = { paths: function(paths, env) { paths.appIndexJs = path.resolve(__dirname, 'client/index.jsx'); paths.appSrc = path.resolve(__dirname, 'client'); return paths; }, }; |
tsconfig.jsonを修正する(TypeScriptを使用している場合)
TSを使っていない場合は読み飛ばしてください。
tsconfig.jsonのincludeのフォルダ名を修正します。
|
1 2 3 4 5 6 7 8 |
{ "compilerOptions": { // 省略 }, "include": [ "client" ] } |
package.jsonの各スクリプトを修正する
最後にpackage.jsonを修正します。
react-app-rewiredをかませて実行するようにする感じですね。
|
1 2 3 4 5 6 7 8 9 |
{ // 省略 "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" }, // 省略 } |
さいごに
以上の作業を行った後、yarn startやyarn buildが正常に動けば完了です！
プロジェクト作成時にオプションでフォルダ名も指定できるようになれば良いんですけどね…
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
