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.
Package-Based RepoThis tutorial sets up a package-based repo. If you prefer an integrated repo, check out the React or Angular tutorials.
Contents:
- 1 - Create Blog
- 2 - Create CLI
- 3 - Share Assets
- 4 - Build Affected Projects
- 5 - Automatically Detect Dependencies
- 6 - Summary
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 npm
You can also choose to add Nx Cloud, but its not required for the tutorial.
1myorg/
2├── packages/
3├── tools/
4├── nx.json
5├── package.json
6├── README.md
7└── tsconfig.base.json
8Yarn workspaces
The package.json file contains this property:
1 "workspaces": [
2 "packages/**"
3 ]
4Which 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:
❯
npm add -D @11ty/eleventy@1.0.0
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. 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}
10These 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>
2Clean Up
If you have a workspace.json file in the root, delete it.
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
45
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 %}
10Create the following files:
packages/blog/src/_includes/layout.liquid:
1
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>
13packages/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).
19packages/blog/src/posts/posts.json:
1{
2 "layout": "layout.liquid",
3 "tags": ["posts"]
4}
5Once 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
- Continue to Step 2: Create cli