はじめに
Windowsでcreate-react-app環境構築をします。
Macであればサクッとできそうだったのですが、
Windowsの場合はHomebrewをWSLで動作させる必要がありました。
途中何度か躓いた点がありましたので、
各段階で参考記事&補足部分を纏め、記事にしました。
この記事では、Ubuntuをインストールし、シェルで作業していく流れになります。
※他にも方法ありそうです。
参考にさせていただいた記事
WSL (Windows Subsystem for Linux) のセットアップ方法
Homebrewインストール
MacにNode.jsをインストール
WSL上のUbuntuからWindows側のファイルにアクセスする方法
日本一わかりやすいReact入門#3...create-react-appで環境構築しよう
WSLインストール～Ubuntuセットアップ
ここに関しては下記記事通りで、スムーズに進むかと思います。
参考：WSL (Windows Subsystem for Linux) のセットアップ方法
WSL上でUbuntuを使えるようになれば完了です。
Homebrewインストール
参考：Homebrewインストール
コチラの記事の、【Homebrewをインストールする】の部分を参考にしています。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
brew install hello
brew install helloコマンドを入力後、
下記コマンドでHomebrewのバージョンが表示されればOKです。
brew -v
nodebrewインストール
MacにNode.jsをインストール
こちらの記事の【nodebrewのインストール】~【環境パスを通す】まで進めます。
※引き続きUbuntuのシェル上でのコマンド入力です。
Homebrewを使用してインストール
brew install nodebrew
以下コマンドでnodebrewのバージョンが確認
nodebrew -v
Node.jsインストール
create-react-appにはバージョン8.10以上が必要です。
安定版で8.10以上になっていましたのでstableで実行。
nodebrew install-binary stable
念のため、インストール後に-vコマンドで確認してみてください。
次にインストールされたnodeを有効化します。
以下のコマンドでインストールされたバージョンを確認します。
nodebrew ls
バージョンの記載があります
current: none
インストール直後はcurrent: noneとなっているため、必要なバージョンを有効化する。
nodebrew use ○○(バージョンを記載)
再度nodebrew lsを実行して反映されているか確認して下さい。
次に、参考記事内の【環境パスを通す】
のところですが、下記コマンドで実行してください。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.profile
一度、Ubuntuのシェルを閉じて、
再起動後、-vコマンドでnodeのバージョンが表示されれば完了です。
node -v
WSL上のUbuntuからローカル環境へアクセス
Ubuntuシェル上では下記パスでデスクトップまでいけます。
/mnt/c/Users/ユーザー名/OneDrive/デスクトップ
参考：WSL上のUbuntuからWindows側のファイルにアクセスする方法
開発ディレクトリを好きなところに置いて、cdコマンドで移動し、
そのままnpx create-react-appコマンドの実行、開発ができるはずです。
これで環境構築は完了です。