@ronas-it/nx-generators 0.3.8 → 0.4.1

package/README.md

@@ -7,7 +7,11 @@ NX generators for Ronas IT projects.
 1. Create monorepo with Expo app using [NX Expo preset](https://nx.dev/nx-api/expo) or with Next.js app using [NX Next preset](https://nx.dev/nx-api/next):
 
 ```sh
+# For Expo app:
 npx create-nx-workspace@latest my-project --preset=expo --appName=my-app --e2eTestRunner=none --ci=skip
+
+# For Next.js app:
+npx create-nx-workspace@latest my-project --preset=next --appName=my-app --nextAppDir=true --nextSrcDir=false --style=scss --e2eTestRunner=none --ci=skip
 ```
 
 2. Install this package:
@@ -21,13 +25,22 @@ npm i @ronas-it/nx-generators --save-dev
 ```sh
 npx nx g repo-config
 npx nx g code-checks
-npx nx g expo-app // for Expo app
+
+# For Expo app:
+npx nx g expo-app
+
+# For Next.js app:
+npx nx g next-app
 ```
 
 Or run all generators at once:
 
 ```sh
+# For Expo app:
 npx nx g repo-config && npx nx g code-checks && npx nx g expo-app
+
+# For Next.js app:
+npx nx g repo-config && npx nx g code-checks && npx nx g next-app
 ```
 
 4. Start the app:
@@ -55,15 +68,15 @@ Configures code checks and formatting with pre-commit hook.
 
 ### 3. `expo-app`
 
-Generates and configures Expo React Native app.
+Generates and configures an Expo React Native app.
 
-### Options
+#### Options
 
-1. `name` (optional) - name of the app for `app.config.ts` (e.g: my-app)
+1. `name` (optional) - name of the app for `app.config.ts` (e.g: `my-app`)
 
-2. `directory` (optional) - name of the directory in the `apps/` folder (e.g: mobile)
+2. `directory` (optional) - name of the directory in the `apps/` folder (e.g: `mobile`)
 
-### Example
+#### Example
 
 ```sh
 npx nx g expo-app --name=my-app --directory=mobile
@@ -73,11 +86,31 @@ or
 npx nx g expo-app my-app mobile
 ```
 
-### 4. `react-lib`
+### 4. `next-app`
+
+Generates and configures a Next.js app.
+
+#### Options
+
+1. `name` (optional) - name of the app (e.g: `my-app`)
+
+2. `directory` (optional) - name of the directory in the `apps/` folder (e.g: `web`)
+
+#### Example
+
+```sh
+npx nx g next-app --name=my-app --directory=web
+```
+or
+```sh
+npx nx g next-app my-app web
+```
+
+### 5. `react-lib`
 
 Generates a library according to [NX notation](https://nx.dev/concepts/more-concepts/applications-and-libraries).
 
-### Options
+#### Options
 
 1. `directory` (optional) - directory for the library (e.g. mobile/account/features/profile-settings)
 
@@ -85,7 +118,7 @@ Generates a library according to [NX notation](https://nx.dev/concepts/more-conc
 
 3. `dryRun` (optional) - generate the library without creating files
 
-### Example
+#### Example
 
 ```sh
 npx nx g react-lib --directory=mobile/account/features/profile-settings --withComponent --dryRun
@@ -95,17 +128,17 @@ or
 npx nx g react-lib mobile/account/features/profile-settings --withComponent --dryRun
 ```
 
-### 5. `react-component`
+### 6. `react-component`
 
 Creates a React component in particular library.
 
-### Options
+#### Options
 
 1. `name` (optional) - name of the component (e.g. AppButton)
 
 2. `subcomponent` (optional) - generate a folder for components
 
-### Example
+#### Example
 
 ```sh
 npx nx g react-component --name=AppButton --subcomponent

package/generators.json

@@ -10,6 +10,11 @@
       "schema": "./src/generators/expo-app/schema.json",
       "description": "expo-app generator"
     },
+    "next-app": {
+      "factory": "./src/generators/next-app/generator",
+      "schema": "./src/generators/next-app/schema.json",
+      "description": "next-app generator"
+    },
     "repo-config": {
       "factory": "./src/generators/repo-config/generator",
       "schema": "./src/generators/repo-config/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ronas-it/nx-generators",
-  "version": "0.3.8",
+  "version": "0.4.1",
   "description": "NX generators for Ronas IT projects",
   "license": "MIT",
   "author": "Ronas IT",

package/src/generators/next-app/files/.env.development.template

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_ENV=development

package/src/generators/next-app/files/.env.production.template

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_ENV=production

package/src/generators/next-app/files/.env.template

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_ENV=development

package/src/generators/next-app/files/README.md.template

@@ -0,0 +1,39 @@
+# <%= formatName(name) %> - Next.js app
+
+This is a web app built with Next.js.
+
+## Tasks overview
+
+You can run tasks for this project with:
+
+```sh
+npx nx <task-name> <%= name %>
+```
+
+To view the list of available tasks, run:
+
+```sh
+npx nx show project <%= name %> --web
+```
+
+The following tasks are included by default:
+
+- `dev` – Start the local development server.
+- `build` – Create a production build.
+- `start` – Create and start a production build.
+- `lint` – Check the source code with `eslint`.
+
+## Development
+
+To run this application locally, follow these steps:
+
+```sh
+# 1. Navigate to Nx workspace directory containing this app
+cd <path-to-nx-workspace>
+
+# 2. Install dependencies
+npm install
+
+# 3. Start the local development server
+npx nx dev <%= name %>
+```

package/src/generators/next-app/files/app/[locale]/layout.tsx.template

@@ -0,0 +1,48 @@
+import { constants, Locale } from '../../constants';
+import { notFound } from 'next/navigation';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { ReactElement, ReactNode } from 'react';
+import { Providers } from './providers';
+
+export const metadata = {
+  title: '<%= formatName(name) %>',
+};
+
+export interface RootLayoutProps {
+  children: ReactNode;
+  params: { locale: Locale };
+}
+
+const locales = constants.locales;
+
+export const generateStaticParams = (): Array<{ locale: Locale }> =>
+  locales.map((locale) => ({ locale }));
+
+export default function RootLayout({
+  children,
+  params: { locale },
+}: RootLayoutProps): ReactElement {
+  if (!locales.includes(locale)) {
+    notFound();
+  }
+
+  unstable_setRequestLocale(locale);
+
+  return (
+    <html lang={locale}>
+      <head>
+        <meta
+          name="robots"
+          content={
+            process.env.NEXT_PUBLIC_APP_ENV === 'production'
+              ? 'index'
+              : 'noindex'
+          }
+        />
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/src/generators/next-app/files/app/[locale]/page.tsx.template

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { Locale } from '../../constants';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
+
+export interface IndexPageProps {
+  params: { locale: Locale };
+}
+
+export default function Index({
+  params: { locale },
+}: IndexPageProps): ReactElement {
+  unstable_setRequestLocale(locale);
+
+  const t = useTranslations('HOME_PAGE');
+
+  return <div>{t('HOME_PAGE_TEXT')}</div>;
+}

package/src/generators/next-app/files/app/[locale]/providers.tsx.template

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { NextIntlClientProvider, useMessages } from 'next-intl';
+
+export function Providers({
+  children,
+}: {
+  children: React.ReactNode;
+}): ReactElement {
+  const messages = useMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}

package/src/generators/next-app/files/constants.ts.template

@@ -0,0 +1,11 @@
+export type Locale = 'en';
+
+interface Constants {
+  defaultLocale: Locale;
+  locales: Array<Locale>;
+}
+
+export const constants: Constants = {
+  defaultLocale: 'en',
+  locales: ['en'],
+};

package/src/generators/next-app/files/i18n/en.json.template

@@ -0,0 +1,5 @@
+{
+  "HOME_PAGE": {
+    "HOME_PAGE_TEXT": "<%= formatName(name) %> home page"
+  }
+}

package/src/generators/next-app/files/i18n.ts.template

@@ -0,0 +1,13 @@
+import { notFound } from 'next/navigation';
+import { getRequestConfig } from 'next-intl/server';
+import { constants, Locale } from './constants';
+
+export default getRequestConfig(async ({ locale }) => {
+  if (!constants.locales.includes(locale as Locale)) {
+    notFound();
+  }
+
+  return {
+    messages: (await import(`./i18n/${locale}.json`)).default,
+  };
+});

package/src/generators/next-app/files/middleware.ts.template

@@ -0,0 +1,12 @@
+import { constants } from './constants';
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  locales: constants.locales,
+  defaultLocale: constants.defaultLocale,
+  localePrefix: 'never',
+});
+
+export const config = {
+  matcher: ['/((?!api|_next|.*\\..*).*)'],
+};

package/src/generators/next-app/files/next.config.js.template

@@ -0,0 +1,19 @@
+const { withNx } = require('@nrwl/next/plugins/with-nx');
+const withNextIntl = require('next-intl/plugin')();
+
+/**
+ * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+  output: 'standalone',
+  async redirects() {
+    return [];
+  },
+};
+
+module.exports = withNx(withNextIntl(nextConfig));

package/src/generators/next-app/generator.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { NextAppGeneratorSchema } from './schema';
+export declare function nextAppGenerator(tree: Tree, options: NextAppGeneratorSchema): Promise<() => void>;
+export default nextAppGenerator;

package/src/generators/next-app/generator.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nextAppGenerator = void 0;
+const tslib_1 = require("tslib");
+const child_process_1 = require("child_process");
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+const utils_1 = require("../../shared/utils");
+const path = require("path");
+const dependencies = {
+    'next-intl': '^3.17.2',
+};
+function nextAppGenerator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const appRoot = `apps/${options.directory}`;
+        // Install @nx/next plugin
+        (0, child_process_1.execSync)('npx nx add @nx/next', { stdio: 'inherit' });
+        if (!(0, fs_1.existsSync)(appRoot)) {
+            (0, child_process_1.execSync)(`npx nx g @nx/next:app ${options.name} --directory=apps/${options.directory} --projectNameAndRootFormat=as-provided --appDir=true --style=scss --src=false --unitTestRunner=none --e2eTestRunner=none`, { stdio: 'inherit' });
+        }
+        // Remove unnecessary files and files that will be replaced
+        tree.delete(`${appRoot}/public/.gitkeep`);
+        tree.delete(`${appRoot}/app/api`);
+        tree.delete(`${appRoot}/app/page.tsx`);
+        tree.delete(`${appRoot}/app/page.module.scss`);
+        tree.delete(`${appRoot}/app/global.css`);
+        tree.delete(`${appRoot}/app/layout.tsx`);
+        tree.delete(`${appRoot}/.eslintrc.json`);
+        // Update app tsconfig.json to skip automatic reconfiguration during the first application run
+        const appTsconfigPath = `${appRoot}/tsconfig.json`;
+        const appTsconfigJson = (0, devkit_1.readJson)(tree, appTsconfigPath);
+        const nextTypesInclude = '.next/types/**/*.ts';
+        if (!appTsconfigJson.include.includes(nextTypesInclude)) {
+            appTsconfigJson.include.push(nextTypesInclude);
+            (0, devkit_1.writeJson)(tree, appTsconfigPath, appTsconfigJson);
+        }
+        // Add app files
+        (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files'), appRoot, Object.assign(Object.assign({}, options), { formatName: utils_1.formatName }));
+        // Add dependencies
+        (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, {});
+        yield (0, devkit_1.formatFiles)(tree);
+        return () => {
+            (0, devkit_1.installPackagesTask)(tree);
+        };
+    });
+}
+exports.nextAppGenerator = nextAppGenerator;
+exports.default = nextAppGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/next-app/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/next-app/generator.ts"],"names":[],"mappings":";;;;AAAA,iDAAyC;AACzC,uCAQoB;AAEpB,2BAAgC;AAChC,8CAAgD;AAChD,6BAA6B;AAE7B,MAAM,YAAY,GAAG;IACnB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,SAAsB,gBAAgB,CACpC,IAAU,EACV,OAA+B;;QAE/B,MAAM,OAAO,GAAG,QAAQ,OAAO,CAAC,SAAS,EAAE,CAAC;QAE5C,0BAA0B;QAC1B,IAAA,wBAAQ,EAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAEtD,IAAI,CAAC,IAAA,eAAU,EAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAA,wBAAQ,EACN,yBAAyB,OAAO,CAAC,IAAI,qBAAqB,OAAO,CAAC,SAAS,2HAA2H,EACtM,EAAE,KAAK,EAAE,SAAS,EAAE,CACrB,CAAC;QACJ,CAAC;QAED,2DAA2D;QAC3D,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,kBAAkB,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,UAAU,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,eAAe,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,iBAAiB,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,iBAAiB,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,iBAAiB,CAAC,CAAC;QAEzC,8FAA8F;QAC9F,MAAM,eAAe,GAAG,GAAG,OAAO,gBAAgB,CAAC;QACnD,MAAM,eAAe,GAAG,IAAA,iBAAQ,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QACxD,MAAM,gBAAgB,GAAG,qBAAqB,CAAC;QAE/C,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACxD,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC/C,IAAA,kBAAS,EAAC,IAAI,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;QACpD,CAAC;QAED,gBAAgB;QAChB,IAAA,sBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,kCACrD,OAAO,KACV,UAAU,EAAV,kBAAU,IACV,CAAC;QAEH,mBAAmB;QACnB,IAAA,qCAA4B,EAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;QAErD,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,IAAA,4BAAmB,EAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;CAAA;AAjDD,4CAiDC;AAED,kBAAe,gBAAgB,CAAC"}

package/src/generators/next-app/schema.d.ts

@@ -0,0 +1,4 @@
+export interface NextAppGeneratorSchema {
+  name: string;
+  directory: string;
+}

package/src/generators/next-app/schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NextApp",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Enter the name of the app (e.g: my-app)"
+    },
+    "directory": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "x-prompt": "Enter the name of the directory in the 'apps/' folder (e.g: web)"
+    }
+  },
+  "required": ["name", "directory"]
+}