Introduction
Nx is a tool that manages monorepos and standardises tooling within that monorepo.
As part of these standards, Nx provides a set of tools that allow users to quickly generate a static vanilla HTML website, without any complicated tooling.
Prerequisites
To begin, make sure we have an Nx workspace setup.
npx create-nx-workspace@latest <workspace-name>
✔ Which stack do you want to use? · none
✔ Package-based monorepo, integrated monorepo, or standalone project? · integrated
✔ Do you want Nx Cloud to make your CI fast? · skip
This will generate an Nx workspace, that we can assign any name to. I choose an integrated repo because I generally use Nx to work with multiple projects that interact with each other at the monorepo level.
If we face an error stating that the npx command is not found, we can get it by installing the latest version of NodeJS. npx will come with that version of NodeJS.
For reference, the version that this article uses is NodeJS is v20.12.2.
Scaffolding our HTML Site
To generate our site, we will use the Nx provided plugin @nx/web. First we get this plugin by installing it via npm into the root of our monorepo, then use it to generate our application.
cd <workspace-name>
npm install -D @nx/web
npx nx generate @nx/web:application
✔ What name would you like to use for the application? · <app-name>
✔ Which stylesheet format would you like to use? · css
✔ Which bundler do you want to use? · webpack/vite
✔ Which E2E test runner would you like to use? · none
This will generate a folder with the following structure:
.
├── index.html
├── project.json
├── public
│ └── favicon.ico
├── src
│ ├── app
│ │ ├── app.element.css
│ │ ├── app.element.spec.ts
│ │ └── app.element.ts
│ ├── assets
│ ├── main.ts
│ └── styles.css
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── vite.config.ts
Commands
To serve or build, we can use inferred commands from the @nx/web plugin. To find out more, read about inferred tasks.
npx nx run <app-name>:serve # to serve
npx nx run <app-name>:build # to build
Observations
Folder structure
Those familiar with Nx will find the project.json file familiar. Here we store all our project related configurations for Nx to parse, and which also helps to define the project-level behavior of our static site within the context of the Nx monorepo.
Like all other static sites, we can identify that the entrypoint of our project is index.html. Within it the line <script type="module" src="/src/main.ts"></script> loads the module located at src/main.ts, which sets the ground for exporting web components that we can then use in the index.html file. The usage of our very first web component is already provided by the line <static-site-root></static-site-root> in said file.
More on Web Components
Because web components seems to be the preferred way of handling componentisation in the @nx/web plugin, we can look at it a little more.
The contents of the app.element.ts file should be familiar to those familiar with web components.
import './app.element.css';
export class AppElement extends HTMLElement {
public static observedAttributes = [];
connectedCallback() { ... }
}
customElements.define('static-site-root', AppElement);
This basically defines and exports a web component, allowing us to build resuable components for our static site.
For those unfamiliar with web components, feel free to check out my overly detailed write up about it here.
Limitations
Some key limitations of this generator include
- No easily handled routing, unlike in more advanced static html generators
- Modularisation and template reuse with web components is not necessarily developer friendly, because it still mixes JS with HTML
Conclusion
In this short article, we have looked at using Nx to scaffold a static vanilla HTML site. Hope it was useful :)