NXフレームワークの調査
NXワークスペース入門
このブログのポストシリーズでは、私は提供するNXのワークスペースの機能を探るつもりです.元のポストはNextJS Tutorial with Nx Framework .
このブログのポストシリーズでは、私はNXのワークスペースを提供する機能を探るつもりです.私は、NX Workspaceの中で簡単な次のJSウェブアプリをToowind CSSスタイルで構築するつもりです.
このポストは、警報システムガイドの研究過程で書かれましたAlarm sistemleri トルコ語で
NXは、モダンなフルスタックWeb技術に重点を置いて、モノリポジトリの拡張可能なdevのツールの高度なセットです.
NXワークスペースのセットアップNextJSアプリ
npm install -g nx
# Install and create workspace
npx create-nx-workspace nx-tutorial
# Choose project types
✔ Workspace name (e.g., org name) · nx-tutorial
? What to create in the new workspace …
❯ empty [an empty workspace with a layout that works best for building apps]
react [a workspace with a single React application]
angular [a workspace with a single Angular application]
next.js [a workspace with a single Next.js application]
gatsby [a workspace with a single Gatsby application]
nest [a workspace with a single Nest application]
express [a workspace with a single Express application]
web components [a workspace with a single app built using web components]
react-express [a workspace with a full stack application (React + Express)]
angular-nest [a workspace with a full stack application (Angular + Nest)]
oss [an empty workspace with a layout that works best for open-source projects]
# Choose whether you'll use Nx Cloud or not
✔ Use Nx Cloud? (It's free and doesn't require registration.) · Yes
> NX Nx is creating your workspace.
# get into the workspace
cd nx-tutorial
利用可能なプラグインを参照ください.
NX Listコマンドで利用可能なプラグインのすべてを見ることができます
# See the available plugins
nx list
> NX Installed plugins:
@nrwl/jest (builders,generators)
@nrwl/linter (builders)
@nrwl/workspace (builders,generators)
> NX Also available:
@nrwl/angular (generators)
@nrwl/cypress (executors,generators)
@nrwl/express (executors,generators)
@nrwl/nest (executors,generators)
@nrwl/next (executors,generators)
@nrwl/node (executors,generators)
@nrwl/nx-plugin (executors,generators)
@nrwl/react (executors,generators)
@nrwl/storybook (executors,generators)
@nrwl/web (executors,generators)
> NX Community plugins:
1.2 )次のプラグインのインストール
さて、次のプラグインをインストールしてください.
# Install the plugin
yarn add @nrwl/next
1.3 )プラグインオプションを参照ください.
プラグインで何ができるか見てみましょう.選択したプラグインの使用可能なオプションが表示されます.私はアプリケーションを生成するつもりですが、まずすべてのオプションを見る必要があります.つのオプションを生成し、実行する3オプションがあります.
# See the options for the plugin
# nx list [plugin]
nx list @nrwl/next
> NX Capabilities in @nrwl/next:
GENERATORS
init : Initialize the @nrwl/next plugin
application : Create a Next.js application
page : Create a Next.js page component
component : Create a React component
EXECUTORS/BUILDERS
build : Build a Next.js app
server : Serve a Next.js app
export : Export a Next.js app. The exported application is located at dist/$outputPath/exported.
次のアプリケーションを生成するためのオプションを参照してください
次のアプリケーションを生成する前に、それはアプリを生成するための初期設定オプションを参照する方が良いでしょう.そのためには、ヘルプフラグをコマンドの末尾に追加しなければなりません.
# See the options for generating a Next application
nx generate @nrwl/next:application --help
nx generate @nrwl/next:application [name] [options,...]
Options:
--name The name of the application.
--directory The directory of the new application.
--style The file extension to be used for style files. (default: css)
--server The server script path to be used with next.
--linter The tool to use for running lint checks. (default: eslint)
--skipFormat Skip formatting files
--skipWorkspaceJson Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style)
--unitTestRunner Test runner to use for unit tests (default: jest)
--e2eTestRunner Test runner to use for end to end (e2e) tests (default: cypress)
--tags Add tags to the application (used for linting)
--js Generate JavaScript files rather than TypeScript files.
--setParserOptionsProjecWhether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons.
--standaloneConfig Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json
--dryRun Runs through and reports activity without writing to disk.
--skip-nx-cache Skip the use of Nx cache.
--help Show available options for project target.
次のJSアプリケーションの生成
アプリケーションを生成するには- dryrunフラグを使用する方が良いです.また、私は私のアプリに名前を付ける必要があります.コマンドを実行すると、いくつかの設定オプションが利用できます.CSSスタイリングオプションに固執します
# I'll also choose the name of the app as "store"
nx generate @nrwl/next:application store
? Which stylesheet format would you like to use? …
❯ CSS
SASS(.scss) [ http://sass-lang.com ]
Stylus(.styl) [ http://stylus-lang.com ]
LESS [ http://lesscss.org ]
styled-components [ https://styled-components.com ]
emotion [ https://emotion.sh ]
styled-jsx [ https://www.npmjs.com/package/styled-jsx ]
次のJSアプリケーションを起動します
次のアプリケーションを設定した後、ワークスペースを開きましょう.JSONファイル.ファイルでは、ストアアプリケーションの下にターゲットリストが表示されます.これらは私が次のJSアプリケーションで行うことができるアクションです.
{
"version": 2,
"projects": {
"store": {
"root": "apps/store",
--- --- --- --- --- ---
"targets": {
"build": {
--- --- --- --- --- ---
},
"serve": {
--- --- --- --- --- ---
},
"export": {
--- --- --- --- --- ---
},
"lint": {
--- --- --- --- --- ---
}
}
},
--- --- --- --- --- ---
--- --- --- --- --- ---
# Serving the app
# nx run [project]:[target]
nx run store:serve
依存性のインストール
2.1 . TailwindCSS設定
私はスタイルを風上CSSでWebアプリケーションに行くつもりです.それの依存性を加えましょう.
# Tailwind CSS dependencies
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# Other styling libs
yarn add @heroicons/react @headlessui/react
# Put tailwind config file in the app dir
cd apps/store
npx tailwindcss init -p
// apps/store/postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: './apps/store/tailwind.config.js' },
autoprefixer: {},
},
};
// apps/site/tailwind.config.js
const { join } = require('path');
// available since Nx v 12.5
const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
module.exports = {
mode: 'jit',
purge: [
join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'),
...createGlobPatternsForDependencies(__dirname),
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
2.2 . TuxWinCSSスタイルのインポート
ルートフォルダにいるときは、別のスタイルファイルを作成してください.
# create tailwind.css file on pages dir
touch apps/store/pages/tailwind.css
/* apps/store/pages/tailwind.css */
@tailwind components;
@tailwind base;
@tailwind utilities;
/* apps/store/pages/styles.css */
@import "./tailwind.css";
/* The rest of styles.css file */
/* ----------------------------*/
3 )ライブラリを作成する
NXフレームワークを使用すると、アプリケーションとLIBSを使用してプロジェクトを構築することができます.言い換えれば、我々はアプリケーションディレクトリ内のアプリケーションライブラリを作成する必要はありません.また、別の発行ライブラリを作成することもできます.
作成するライブラリの種類は異なります.
Nx Library types
@ nrwl/workspaceを使って簡単にライブラリを動かすことができます
ライブラリのビルドオプションは2つあります.これらは、角度、反応、nestjsとノードに有効です.したがって、私は反応ライブラリを別々の独立した出版可能なライブラリとして使うつもりです.
また、CLIコマンドに渡すことができる便利なオプションフラグを見つけます.あなたは見つけることができますthe full list of the react:library options .
@nrwl/react:library flags
# Create a library wiht @nrwl/react package
# See which files will be written to the disk
# (output is not produced)
nx g @nrwl/react:lib tailwind-ui --dry-run
# Now create the library as publishable
# publishable flag requires importPath=npmusername/libraryname
nx g @nrwl/react:lib tailwind-ui --publishable --importPath=@canburaks/tailwind-ui --globalCss=true --component=false
# Also you can remove the library as like this
# nx g remove tailwind-ui
# You'll see the ouput like that
✔ Which stylesheet format would you like to use? · css
UPDATE workspace.json
UPDATE nx.json
CREATE libs/tailwind-ui/.eslintrc.json
CREATE libs/tailwind-ui/.babelrc
CREATE libs/tailwind-ui/README.md
CREATE libs/tailwind-ui/package.json
CREATE libs/tailwind-ui/src/index.ts
CREATE libs/tailwind-ui/tsconfig.json
CREATE libs/tailwind-ui/tsconfig.lib.json
UPDATE tsconfig.base.json
CREATE libs/tailwind-ui/jest.config.js
CREATE libs/tailwind-ui/tsconfig.spec.json
4 )コンポーネントを作成する
今、私は出版可能なユーザーインターフェイスのコンポーネントライブラリを生成します.私は、このライブラリを風変わりなコンポーネントと混同するつもりです.
また、スタイルのスタイルがTailwindクラスによって行われ、余分なスタイルファイルを作成する必要がないため、スタイル= Noneフラグが追加されます.
また、ライブラリはTailWindCSSライブラリを含んでいません.ライブラリはTarwindCSSのピア依存性を持っています.
@nrwl/react:components flags
4.1 )ライブラリのコンポーネントを生成する
# Navbar component
nx g @nrwl/next:component Navbar --project=tailwind-ui --style=none --export=true
# Footer component
nx g @nrwl/next:component Footer --project=tailwind-ui --style=none --export=true
4.2 )アプリケーションのコンポーネントを生成する
ライブラリコンポーネントに必要なファイルを生成しました.それは良い練習をnextjsアプリのLayouコンポーネントを作成することです.それをつくりましょう.
nx g @nrwl/next:component Layout --project=store --style=none
// apps/store/components/layout/layout.tsx
import Navbar from './navbar'
import Footer from './footer'
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
// libs/tailwind-ui/src/lib/navbar/navbar.tsx
export function Navbar() {
return (
<section className="w-full px-8 text-gray-700 bg-white ">
<div className="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
<div className="relative flex flex-col md:flex-row">
<a
href="/"
className="flex items-center mb-5 font-medium text-gray-900 lg:w-auto lg:items-center lg:justify-center md:mb-0"
>
<span className="mx-auto text-xl font-black leading-none text-gray-900 select-none">
cbsofyalioglu<span className="text-indigo-600">.</span>
</span>
</a>
<nav className="flex flex-wrap items-center mb-5 text-base md:mb-0 md:pl-8 md:ml-8 md:border-l md:border-gray-200">
<a
className="mr-5 font-medium leading-6 text-gray-600 hover:text-gray-900"
href="/contact"
>
Contact
</a>
</nav>
</div>
<div className="inline-flex items-center ml-5 space-x-6 lg:justify-end">
<a
href="/login"
className="text-teal-600 px-8 py-2 border-teal-600 font-medium leading-6 border-2 rounded-lg transition ease-out duration-300 hover:text-blueGray-100 hover:bg-teal-600"
>
Login
</a>
</div>
</div>
</section>
);
}
// libs/tailwind-ui/src/lib/footer/footer.tsx
export function Footer() {
return (
<section className="text-gray-700 bg-white body-font border-t-4 border-teal-800">
<div className="container flex flex-col items-center px-8 py-8 mx-auto max-w-7xl sm:flex-row">
<a
href="https://www.filizguvenlik.com.tr"
className="text-xl font-black leading-none text-gray-900 select-none logo"
>
cbsofyalioglu<span className="text-indigo-600">.</span>
</a>
<p className="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0">
© 2021 -{' '}
<a href="https://webmeister.org" target="_blank" className="text-xs" rel="noreferrer">
Webmeister
</a>
</p>
</div>
</section>
);
}
// libs/tailwind-ui/src/index.tsx
export * from "./lib/navbar/navbar"
export * from './lib/footer/footer';
# build library
nx run tailwind-ui:build
// apps/store/pages/_app.tsx
import { AppProps } from 'next/app';
import Head from 'next/head';
import './styles.css';
import Layout from '../components/layout/layout';
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
// // apps/store/pages/index.ts
export default function Index() {
return (
<div className="min-h-screen">
</div>
);
}
4 )ページを生成する
// Generate a contact page
nx generate page Contact
// apps/store/pages/contact.tsx
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable @next/next/no-img-element */
export default function Contact(props) {
return (
<div className="container mx-auto mt-8 md:mt-0 md:space-x-10 md:grid grid-cols-3 justify-center md:py-40">
<div className="grid justify-center items-center order-1 col-span-1">
<img
className="lg:h-80 md:h-64 h-40 rounded-full"
src="https://cbsofyalioglu.fra1.cdn.digitaloceanspaces.com/cbs/cbsofyalioglu-black.png"
alt=""
/>
</div>
<div className="mt-8 md:mt-0 lg:justify-end col-span-2">
<h1 className="text-4xl text-gray-800 text-center md:text-left font-bold mb-6">
Hi, I am Can Burak Sofyalioglu.
</h1>
<p className="text-xl text-gray-800 text-center md:text-left">
I'm an engineer.
</p>
</div>
</div>
);
}
Reference
この問題について(NXフレームワークの調査), 我々は、より多くの情報をここで見つけました https://dev.to/canburaks/exploring-the-nx-framework-next-js-development-c5lテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol