Nxを利用してgatsbyのプロジェクトを始めるメリット

Table of Contents

1. Nxとは?
2. Nxでプロジェクトを作成する
3. Nxを利用してgatsbyのプロジェクトを作成するメリット

1. What is Nx?

Nrwl Incが提供する monorepo / micofrontendのワークスペースを管理・作成するためのOpen Sourceのライブラリです。
lernaなどの違いとしては、packageをマネジメントするのではなく複数のプロジェクトを管理、共通のlibraryを作成することに特化している気がします。

• Nrwl
• Nx

1.NxでGatsbyのProjectを作成する

自分が感じたメリットを記載するよりもプロジェクトを作成した方がメリットを感じれると思うので、先にnxを利用してGatsbyのプロジェクトを作成します。

1-1. nxのでワークスペースを作成する

create-nx-workspaceを利用してワークスペース(複数のプロジェクトを管理、作成する)を作成します。

$ pwd
/your/project/path
$ npx create-nx-workspace@latest

? Workspace name (e.g., org name)     my-workspace # ディレクトリの名前になります

? What to create in the new workspace empty #emptyを選択します
react             [a workspace with a single React application] 
react-express     [a workspace with a full stack application (React + Express)] 
next.js           [a workspace with a single Next.js application] 
empty             [an empty workspace with a layout that works best for buildi
ng apps] 
oss               [an empty workspace with a layout that works best for open-s
ource projects] 
web components    [a workspace with a single app built using web components] 
angular           [a workspace with a single Angular application]
angular-nest      [a workspace with a full stack application (Angular + Nest)]

? CLI to power the Nx workspace　　　　Nx
Nx           [Recommended for all applications (React, Node, etc..)] 
Angular CLI  [Recommended for Angular only workspaces]

? Use the free tier of the distributed cache provided by Nx Cloud No
Yes [Faster command execution, faster CI. Learn more at https://nx.app] 
No  [Only use local computation cache]

$ cd my-workspace
$ tree -L 2 -I node_modules
├── README.md
├── apps
│   ├── .gitkeep
├── jest.config.js
├── libs
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

これで基本的なワークスペースの環境が作成されました。
基本的にnrwlが提供するcliを利用するためglobalにinstallしていきます。

$ pwd
my-workspace
$ yarn global add @nrwl/cli

1-2. Gatsyのプロジェクト作成

installが完了したら、gatsbyの環境を作成していきます。

$ pwd
my-workspace
$ yarn add -D @nrwl/gatsby #gatsbyの依存関係をinstallします
$ nx g @nrwl/gatsby:app sample # gatsbyのapplicationを作成します
$ tree -L 2 -I node_modules
├── README.md
├── apps
│   ├── sample
│   └── sample-e2e
├── jest.config.js
├── libs
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

これでgatsbyのアプリケーションの環境を作成できました。
gatsbyのプロジェクトを確認するため、dev serverを起動します。コマンドは、nx serve <>でrun serverを起動できます。

$ nx serve sample
ou can now view gatsby-starter-default in the browser.
⠀
  http://localhost:4200/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:4200/___graphql

localhost:4200をブラウザで開いて、下記のような画面が表示されれば完成です。

これで基本的なプロジェクトは完成しました。

2. Nxを利用してgatsbyのプロジェクトを作成するメリット

個人的にnxを利用しての利点は、大きく分けて2つ。

1. 開発で必要な最低限の依存関係を構築できる(react, typescript, jest, cypress)
2. 企業レベルでのlibrary(特にUI library Util Function)やapplicationを一つのレポジトリで管理できる

2-1. 開発で必要な最低限の依存関係を構築できる(react, typescript, jest, cypress)

初期設定にtypescript, jest (unit test, integration test), cypress(e2e test)が設定されておりオレオレ環境をさけてメンテンアンスコストを下げることが可能。
また、nxを利用して story bookを追加することもできるので、初期セットとしては十二分だと思う。

2-2. 企業レベルでのlibraryやapplicationを一つのレポジトリで管理できる

例えば、ui libraryを独自に作ろうと考えた時に従来であればgit のレポジトリを作成して、そこに作成してgitで依存関係を構築してpackageに依存関係かいたりなど1つのメインレポジトリならいいが、LP Application ApiServerなどやることが増えると毎回依存関係を構築しないといけないが、nxを利用すれば当該関係を1つで管理できる。

例えば、現行のProjectにreactのui libraryを作成するとすると、

1. react libraryの環境を作成
2. gatsby applicationで利用する

と3つのステップで対応が可能です。

2-1-1. react libraryの環境を作成

Gatsbyの依存関係しかいれていないので、reactの依存関係を追加します。
(20200729のタイミングで@nrwl/reactを利用しない場合path is undefinedの形式になりエラーになる)

$ yarn add -D @nrwl/react
$ nx g @nrwl/react:lib ui-button --style=css
$ tree -L 2 -I node_modules
.
├── README.md
├── apps
│   ├── sample
│   └── sample-e2e
├── babel.config.json
├── jest.config.js
├── libs
│   └── ui-button # 先ほど指定した ui-buttonが追加される
├── nx.json
├── package.json
├── tools
│   ├── schematics
│   └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lock

1. gatsby applicationで利用する

apps/sample/pages/index.tsx

// @<<workspace-name>>/<<library name>>で指定が可能
// 参照先はlibs/@<<workspace-name>>/src/index.ts だと思ってもらえればいいです
// 下記でimport可能
import { UiButton } from '@gatsby-sample/ui-button';

上記のような短いステップでlibraryの作成が可能です。

以上がNxを利用してgatsbyのプロジェクトを始めるメリットでした、これ以外にもpluginやschematicsなど色々なことが可能なため、大く利点を感じられるとおもいます。

repo