Core Nx Tutorial - Step 1: Create Eleventy Blog

In this tutorial you create multiple projects in a monorepo and take advantage of the core Nx features with a minimum of configuration.

Create a New Workspace

Start by creating a new workspace.

npx create-nx-workspace@latest

You then receive the following prompts in your command line:

Workspace name (e.g., org name)         myorg
What to create in the new workspace     core

You can also choose to add Nx Cloud, but its not required for the tutorial.

myorg/
├── packages/
├── tools/
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json

Yarn workspaces

The package.json file contains this property:

1  "workspaces": [
2    "packages/**"
3  ]

Which tells yarn (or npm) and Nx to look in the packages folder for projects that will each be identified by a package.json file.

Adding Eleventy

Install Eleventy

To install Eleventy run:

yarn add -D -W @11ty/eleventy@1.0.0

or

npm add -D @11ty/eleventy@1.0.0

Note: We are intentionally installing the package at the root of the workspace because this forces the organization to have the upfront cost of agreeing on the same versions of dependencies rather than the delayed cost of having projects using multiple different incompatible versions of dependencies. Yarn needs the -W flag so that you can install dependencies at the root. This is not a requirement of Nx, just a suggestion to help you maintain a growing repo.

Eleventy Hello World

Create a file at packages/blog/package.json with these contents:

1{
2  "name": "blog",
3  "description": "eleventy blog",
4  "version": "1.0.0",
5  "scripts": {
6    "build": "eleventy --input=./src --output=../../dist/packages/blog",
7    "serve": "eleventy --serve --input=./src --output=../../dist/packages/blog"
8  }
9}

These scripts tell Eleventy to read from the src folder we'll create next and output to Nx's default location under dist.

Next, add packages/blog/src/index.html:

1<p>Hello, Eleventy</p>

Running Eleventy with Nx

Now that we have the bare minimum set up for Eleventy, you can run:

nx serve blog

And you can see Hello, Eleventy at http://localhost:8080.

Also, if you run:

nx build blog

The build output will be created under dist/packages/blog. So far, Nx isn't doing anything special. If you run nx build blog again, though, you'll see it finish in less than 100 ms (instead of 1s). The caching doesn't matter yet, but as build times grow, it will become far more useful.

The main value of Nx at this stage of the project is that it doesn't require any custom configuration on your project. The blog could have been built with any of a dozen different platforms and Nx would cache the output just the same.

Build a Basic Blog

To actually create a blog, we'll have to change a few more files. This is all Eleventy specific configuration, so if you have questions consult their documentation or this tutorial.

Update index.html:

1---
2layout: layout.liquid
3pageTitle: Welcome to my blog
4---
5
6{% for post in collections.posts %}
7<h2><a href="{{ post.url }}">{{ post.data.pageTitle }}</a></h2>
8<em>{{ post.date | date: "%Y-%m-%d" }}</em>
9{% endfor %}

Create the following files:

packages/blog/src/_includes/layout.liquid:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <title>My Blog</title>
6  </head>
7  <body>
8    <h1>{{ pageTitle }}</h1>
9
10    {{ content }}
11  </body>
12</html>

packages/blog/src/posts/ascii.md:

1---
2pageTitle: Some ASCII Art
3---
4
5Welcome to [The Restaurant at the End of the Universe](https://hitchhikers.fandom.com/wiki/Ameglian_Major_Cow)
6
7<pre>
8 _____
9< moo >
10 -----
11        \   ^__^
12         \  (oo)\_______
13            (__)\       )\/\
14                ||----w |
15                ||     ||
16</pre>
17
18Art courtesy of [cowsay](https://www.npmjs.com/package/cowsay).

packages/blog/src/posts/posts.json:

1{
2  "layout": "layout.liquid",
3  "tags": ["posts"]
4}

Once these files are in place, run nx serve blog again. Navigate to http://localhost:8080/posts/ascii/ in a browser and you should see the blog post.

What's Next