/*@jsxRuntime automatic @jsxImportSource react*/ const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", p: "p", a: "a", hr: "hr", h2: "h2", code: "code", h3: "h3", ul: "ul", li: "li", pre: "pre" }, _provideComponents(), props.components); return _jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", width: "90%", gap: "20px", fontSize: "18px" }, children: [_jsx(_components.h1, { children: "Creating a Nx Workspace and adding apps" }), _jsxs("span", { children: [_jsx(_components.p, { children: "Through this blog you will learn how to create a new Nx workspace, add a\nNextJS app to it for the Frontend, and a NestJS app for the Backend for a\nbasic TODO project implementation." }), _jsx("i", { children: _jsxs(_components.p, { children: ["While this is not a full Nx tutorial (", _jsx(_components.a, { href: "https://nx.dev/getting-started/intro", children: "There are plenty of them on their\ndocumentation page" }), ")"] }) }), _jsx(_components.p, { children: "it aims to showcase some of Nx features as well as project setup and\nconfiguration." })] }), _jsx(_components.hr, {}), _jsx(_components.h2, { children: "What is Nx?" }), _jsx(_components.p, { children: "Nx is a powerful toolset designed to supercharge the development workflow for modern web applications. At its core, Nx leverages the concept of monorepos, allowing developers to manage frontend, backend, and shared libraries within a single repository. This approach not only simplifies the development process but also enhances collaboration across teams by keeping all related code in one place. As a suite of extensible dev tools, Nx supports a wide range of technologies including Angular, React, Next.js, NestJS, and more, making it a versatile choice for full-stack development." }), _jsx(_components.p, { children: "Plain and simple Nx is a tool that helps you build and manage monorepos organizing them as workspaces\nin which you can build shared libraries (We'll see what libraries are later on) and applications.\nIt also provides a set of tools to help you manage your project, such as code generation, dependency graph visualization, and more." }), _jsx(_components.h2, { children: "Why NX?" }), _jsx(_components.p, { children: "One of the key benefits of Nx is its focus on build optimization and code reusability. By analyzing the dependency graph of the applications and libraries within the workspace, Nx smartly rebuilds only the affected projects, thereby significantly reducing build times. This intelligent build system ensures that as the monorepo grows, the scalability and performance of the build process are maintained. Additionally, Nx promotes code reusability through its library management system, enabling teams to develop highly maintainable and loosely coupled code." }), _jsx(_components.p, { children: "Nx also excels in facilitating a consistent development experience. It provides a collection of code generation schematics and builders that automate the boilerplate code for creating new applications, components, or libraries. This not only accelerates the development process but also enforces best practices and consistency across the entire workspace. Whether it's enforcing code linting, formatting standards, or setting up unit and end-to-end tests, Nx tools ensure that all projects within the workspace adhere to a unified standard." }), _jsx(_components.p, { children: "Beyond improving developer productivity, Nx enhances project understanding and maintenance. The dependency graph generated by Nx offers a visual representation of how projects within the monorepo are interconnected. This feature is invaluable for onboarding new team members, planning refactors, and understanding the impact of changes across the workspace. Moreover, Nx's affected commands allow developers to pinpoint which projects are impacted by a given change, facilitating more efficient testing and code review processes." }), _jsx(_components.p, { children: "Finally, Nx embraces an ecosystem-agnostic philosophy, meaning it can integrate seamlessly with other tools and services used by modern development teams. Whether it's deploying applications with Vercel, Netlify, or integrating with CI/CD pipelines like GitHub Actions or Jenkins, Nx fits smoothly into any development workflow. This flexibility, combined with its powerful features, makes Nx an indispensable tool for teams looking to streamline their development process, improve productivity, and build high-quality web applications." }), _jsx(_components.p, { children: "For those interested in diving deeper into Nx and exploring its capabilities, the official Nx documentation (https://nx.dev/getting-started/intro) is a great resource. It offers comprehensive guides, tutorials, and best practices for leveraging Nx in your projects." }), _jsx(_components.h2, { children: "Let's create the workspace" }), _jsxs("span", { children: [_jsx(_components.p, { children: "First, we need to install Nx globally, you can do this by running the following command:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npm install -g nx" }) }), _jsx(_components.p, { children: "Then, we can create a new workspace by running the following command:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npx create-nx-workspace todo-app --packageManager=npm" }) }), _jsxs(_components.p, { children: [_jsx(_components.code, { children: "todo-app" }), " here is the name of the workspace and will be the namespace when libraries are imported, we'll dig into that later."] })] }), _jsx(_components.p, { children: "When asked, use Next.js as the preset." }), _jsx(_components.p, { children: "When asked, use app router for next." }), _jsx(_components.p, { children: "When asked for app name use todo-app-ui." }), _jsx(_components.p, { children: "Once the installation and setup completes, run the following command" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npx nx dev todo-app-ui" }) }), _jsxs(_components.p, { children: ["to launch the Next.js\ndev server and navigate to ", _jsx("a", { href: "http://localhost:3000", children: "http://localhost:3000" }), ".\nYou should see the running application."] }), _jsx(_components.h2, { children: "Nx Workspace structure" }), _jsx(_components.p, { children: "Let's quickly explore the Nx workspace structure to learn some of the fundamentals." }), _jsx(_components.h3, { children: "Apps and Libs" }), _jsx(_components.p, { children: "An Nx workspace is structured into apps and libs.\nInstead of having all the different features of our app just within folders of our application folder,\nwe rather split them up into “workspace libraries”.\nMost of our business and domain logic should reside in those libraries.\nThe apps can be seen as our “deployables”.\nThey import the functionality in the libs as the building blocks to create a deployable app." }), _jsxs(_components.p, { children: ["Although the libraries can be built and published, they don't have to.\nThey are referenced via TypeScript path mappings in the ", _jsx(_components.code, { children: "tsconfig.base.json" }), " configuration at the root of the Nx workspace.\nWhen we build the application, all referenced libraries are built into the app via the used bundler (e.g. Webpack or Rollup etc)."] }), _jsx(_components.h3, { children: "Config files: workspace.json and nx.json" }), _jsx(_components.p, { children: "Let's give a fast overview of the main configuration files.\nAll the details can be found on the official docs page: https://nx.dev/reference/project-configuration" }), _jsx(_components.p, { children: "The workspace.json is the main configuration file of an Nx workspace. It defines" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The projects in the workspace (e.g. apps and libs)" }), "\n", _jsx(_components.li, { children: "The Nx executor used to run operations on the projects (e.g. serve the app, build it, run Jest tests, Storybook etc..)" }), "\n"] }), _jsx(_components.p, { children: "The nx.json defines mostly additional configuration properties used for the Nx dependency graph.\nAdditionally, you can define the base branch (e.g. master or main or whatever you are using) and the task runner to be used." }), _jsx(_components.h2, { children: "Working on our Next App" }), _jsx(_components.h3, { children: "Understanding Page Structures: Generating the About Page" }), _jsx(_components.p, { children: "After your NextJs project is generated you will see inside the todo-app-ui folder a src folder." }), _jsx(_components.p, { children: "This folder contains an app folder which is where the routes for the site are defined." }), _jsx(_components.p, { children: "Creating a folder inside the app folder will create a new route for the site, as Next.js uses the file system to define routes." }), _jsxs(_components.p, { children: ["Every file returning a React component in there, instructs Next.js to generate a new page.\nAs you can see there is an ", _jsx(_components.code, { children: "index.tsx" }), " page, which you see when navigating to the root of the Next website ", _jsx(_components.code, { children: "http://localhost:3000" }), ".\nTo better understand this, let's create an Todo page that responds at ", _jsx(_components.code, { children: "http://localhost:3000/todo" }), "."] }), _jsxs(_components.p, { children: ["To do this, create a new folder called ", _jsx(_components.code, { children: "todo" }), " inside the ", _jsx(_components.code, { children: "app" }), " folder and create a new file called ", _jsx(_components.code, { children: "index.tsx" }), " inside the ", _jsx(_components.code, { children: "todo" }), " folder."] }), _jsxs(_components.p, { children: ["Inside the ", _jsx(_components.code, { children: "index.tsx" }), " file, add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import styles from './page.module.css';\n\nexport default function Page() {\n return (\n

Todos:

\n );\n}\n" }) }) }), _jsxs(_components.p, { children: ["Now, if you navigate to ", _jsx(_components.code, { children: "http://localhost:3000/todo" }), " you should see the new page."] }), _jsxs(_components.p, { children: ["Let's add some styling to the page, create a new file called ", _jsx(_components.code, { children: "page.module.css" }), " inside the ", _jsx(_components.code, { children: "todo" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: ".mainContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\n.contentContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.contentContainer h1 {\n font-size: 2.5rem;\n font-weight: 500;\n line-height: 3rem;\n}\n" }) }) }), _jsxs(_components.p, { children: ["Now, if you navigate to ", _jsx(_components.code, { children: "http://localhost:3000/todo" }), " you should see the new page with the new styles. We're all set, we now have an NX workspace with a Next.js app that is exposing an almost empty todo page."] }), _jsx(_components.p, { children: "As part of the next blogs we will be adding a NestJS project that exposes a todo CRUD API. Then we will leverage Nx to create a shared library that will be used by both the Next.js app and the NestJS API." }), _jsx(_components.h2, { children: "Adding a NestJS App to the Workspace" }), _jsx(_components.p, { children: "Before we can add a NestJS app to the workspace, we need to install the @nx/nest library, this can be done by running the following command:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npx nx add @nx/nest" }) }), _jsx(_components.p, { children: "Once the installation completes, we can add a NestJS app to the workspace. Nx offers a command for this:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npx nx g @nx/nest:app todo-app-api --frontendProject todo-app-ui" }) }), _jsx(_components.p, { children: "Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the --frontendProject with the project name you wish to enable proxy support for." }), _jsx(_components.p, { children: "This will create a new folder called todo-app-api inside the apps folder. This is where the NestJS app will live." }), _jsx(_components.p, { children: "Before continuing go to the main.ts file of the NestJS app and ensure it is using a port different from the Next.js app. I used 8000." }), _jsx(_components.p, { children: "Let's run the NestJS app to ensure it is working. Run the following command:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npx nx serve todo-app-api" }) }), _jsx("i", { children: "Note: You might get an unknown command nx error when running this. In that case run the following command for installing NX globally:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "npm install -g nx" }) }), _jsxs(_components.p, { children: ["Once the server is running, navigate to ", _jsx("a", { href: "http://localhost:8000/api", children: "http://localhost:8000/api" }), " and you should see the running NestJS app."] }), _jsxs(_components.p, { children: ["Now let's add a todo controller to the NestJS app. Create a new file called ", _jsx(_components.code, { children: "todo.controller.ts" }), " inside the ", _jsx(_components.code, { children: "todo-app-api/src/app/todo" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import { Body, Controller, Get, Post } from '@nestjs/common';\nimport { TodoService } from './todo.service';\nimport { CreateTodoDto } from './dtos/create.todo.dto';\n\n@Controller('todo')\nexport class TodoController {\nconstructor(private readonly todoService: TodoService) {}\n\n@Get()\ngetTodos() {\n return this.todoService.getTodos();\n}\n\n@Post()\ncreateTodo(@Body() newTodo: CreateTodoDto) {\n return this.todoService.createTodo(newTodo);\n}\n}\n" }) }) }), _jsx(_components.p, { children: "On the create todo method, we are expecting a newTodo object to be passed to the method. This object will be validated against the CreateTodoDto class. This class will be created later as part of a library that will be accessible by both the frontend and the backend." }), _jsxs(_components.p, { children: ["For this controller to work properly it needs a TodoService to be injected, let's implement that, create a new file called ", _jsx(_components.code, { children: "todo.service.ts" }), " inside the ", _jsx(_components.code, { children: "todo-app-api/src/app/todo" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import { Injectable } from '@nestjs/common';\nimport { Todo } from './types/todo';\nimport { CreateTodoDto } from './dtos/create.todo.dto';\n\n@Injectable()\nexport class TodoService {\n private todos: Array = [];\n\n getTodos() {\n return this.todos;\n }\n\n createTodo(newTodo: CreateTodoDto) {\n const todoToCreate = {\n ...newTodo,\n id: this.todos.length + 1,\n createdAt: new Date()\n }\n this.todos.push(todoToCreate);\n return todoToCreate.id;\n }\n}\n" }) }) }), _jsxs(_components.p, { children: ["For the sake of this example, we are going to keep the todos in memory, this is so we don't need to configure a database. We are going to use an internal todos class member to store the todos. Note that this private member has a type of ", _jsx(_components.code, { children: "Array" }), ", later on we will create a shared library to define the Todo type."] }), _jsxs(_components.p, { children: ["Now that we have the controller, service, and DTOs in place, we need to create a TodoModule to group these together, create a new file called ", _jsx(_components.code, { children: "todo.module.ts" }), " inside the ", _jsx(_components.code, { children: "todo-app-api/src/app/todo" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "import { Module } from '@nestjs/common';\nimport { TodoController } from './todo.controller';\nimport { TodoService } from './todo.service';\n\n\n@Module({\n controllers: [TodoController],\n providers: [TodoService],\n})\nexport class TodoModule {}\n" }) }) }), _jsxs(_components.p, { children: ["Don't forget to import the ", _jsx(_components.code, { children: "TodoModule" }), " in the AppModule."] }), _jsx(_components.p, { children: "After this is done, we should be able to see the new todo routes being mapped as part of the NestJS app logs when started." }), _jsx(_components.p, { children: "Now that we have finished the NestJS app implementation, we can leverage Nx to create a shared library that will be used by both the Next.js app and the NestJS API. This library will contain the types and interfaces that will be shared between the two projects so we get rid of the errors we introduced when adding the types and classes." }), _jsx(_components.h2, { children: "Creating a Shared Library" }), _jsx(_components.p, { children: "To create a shared library, we can use the following command:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.p, { children: "nx g @nx/node:library" }) }), _jsxs(_components.p, { children: ["When asked for the name of the library use ", _jsx(_components.code, { children: "todo-app-shared" }), "."] }), _jsxs(_components.p, { children: ["This will create a new folder called ", _jsx(_components.code, { children: "todo-app-shared" }), " at the same level of the apps folder. This is where the shared library will live."] }), _jsxs(_components.p, { children: ["Now that we have the shared library in place, we can create a new file called ", _jsx(_components.code, { children: "todo.ts" }), " inside the ", _jsx(_components.code, { children: "todo-app-shared/src/lib" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "export type Todo = {\n id: number;\n title: string;\n createdAt: Date;\n}\n" }) }) }), _jsxs(_components.p, { children: ["Let's share the CreateTodoDto as well, create a new file called ", _jsx(_components.code, { children: "create.todo.dto.ts" }), " inside the ", _jsx(_components.code, { children: "todo-app-shared/src/lib" }), " folder and add the following code:"] }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "export class CreateTodoDto {\n title: string;\n}\n" }) }) }), _jsx(_components.p, { children: "Now that we have the shared library in place, we can import these types in both the Next.js app and the NestJS app." }), _jsxs(_components.p, { children: ["Don't forget export the new files in the ", _jsx(_components.code, { children: "index.ts" }), " file of the shared library. NX should configure the tsconfig.base.json for exporting the new library index."] }), _jsx(_components.p, { children: "After doing this, the backend should stop erroing and we are clear to finish the frontend implementation." }), _jsx(_components.p, { children: "Note: Don't forget to enable cors on the main file of the NestJS app, this is so the Next.js app can make requests to the NestJS app." }), _jsx(_components.h2, { children: "Integrating the UI with the API" }), _jsx(_components.p, { children: "Now that we have the shared library in place, we can import the types and interfaces in the Next.js app." }), _jsx(_components.p, { children: "Now let' finish the frontend implementation adding interactivity to the todo page, we are going to add a button for adding new todos and fetch all todos after the button is added, the todos will be listed again every time a new todo is added." }), _jsx(_components.p, { children: "For accomplishing this, modify the page.tsx under the todo folder in the Next.js app to look like this:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: "'use client';\nimport { useState } from 'react';\nimport styles from './page.module.css';\nimport { CreateTodoDto, Todo } from '@todo-app/todo-app-shared';\n\nexport default function Page() {\n const [todos, setTodos] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleAddNewTodoButtonClick = async () => {\n setIsLoading(true);\n const createTodoPayload: CreateTodoDto = {\n title: 'New Todo',\n };\n const response = await fetch('http://localhost:8000/api/todo', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(createTodoPayload),\n });\n\n if (response) {\n const allTodos = await fetch('http://localhost:8000/api/todo');\n const todos = await allTodos.json();\n setTodos([...todos]);\n }\n\n setIsLoading(false);\n };\n\n return (\n

Todos:

\n {todos.map((todo, index) => (\n

\n #{todo.id} {todo.title}\n

\n ))}\n

\n \n Add new Todo\n \n

\n );\n}\n" }) }) }), _jsx(_components.p, { children: "And the page.module.css file to look like this:" }), _jsx("code", { style: { backgroundColor: "#f4f4f4", padding: "10px", borderRadius: "5px", display: "block", margin: "10px 0", maxWidth: "100%", overflowX: "scroll" }, children: _jsx(_components.pre, { children: _jsx(_components.code, { children: ".mainContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n min-height: 100vh;\n padding-top: 150px;\n}\n\n.contentContainer {\n display: flex;\n justify-content: space-around;\n width: 50%;\n}\n\n.title {\n font-size: 2.5rem;\n font-weight: 500;\n line-height: 3rem;\n}\n\n.addNewTodoButton {\n padding: 10px;\n border: 1px black solid;\n border-radius: 5px;\n cursor: pointer;\n background-color: white;\n}\n\n.addNewTodoButton:hover {\n background-color: #f0f0f0;\n}\n" }) }) }), _jsxs(_components.p, { children: ["Now, if you navigate to ", _jsx(_components.code, { children: "http://localhost:3000/todo" }), " you should see the new page with the new styles and the new button for adding todos, after clicking the add new todo button, a new element will be added to the in memory storage of the backend and will be then fetched by the subsequent fetch call for getting all the todos."] }), _jsx(_components.h2, { children: "Conclusion" }), _jsx(_components.p, { children: "In this blog, we have learned how to create a new Nx workspace, add a NextJS app to it, and a NestJS app for the backend. We have also learned how to create a shared library that will be used by both the frontend and the backend. We have also learned how to integrate the frontend with the backend." })] }) }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };