rockyourcode: Inline Critical CSS With Hugo Pipes, Node.js Setup With TypeScript, Nodemon and ESM
Hello 👋! Thanks for subscribing.
Last week I wrote two articles 🎉:
Inline Critical CSS With Hugo Pipes
Published on: 2021-10-03
tags: Hugo
How to inline critical CSS transformed via Hugo Pipes
I use Hugo pipes to process my CSS files written in Sass.
Example:
- $critical := resources.Get "scss/critical.scss" | resources.ToCSS
- if hugo.IsProduction
- $critical = resources.Get "scss/critical.scss" | resources.ToCSS | resources.Minify
- end
<head>
<link rel="stylesheet" href="$critical.RelPermalink" />
// more code
Easy, peasy. I can use the optimized CSS as an external link to my stylesheet.
But how can I inline CSS?
The Hugo documentation is extensive, but sometimes it’s hard to find what you need.
The solution is easy after all, but it still took me two days to find.
You need to take the Hugo resource’s content and pipe it to the safeCSS function:
- $critical := resources.Get "scss/critical.scss" | resources.ToCSS
- if hugo.IsProduction
- $critical = resources.Get "scss/critical.scss" | resources.ToCSS | resources.Minify
- end
<head>
<style>$critical.Content | safeCSS</style>
// more code
Resources
Node.js Setup With TypeScript, Nodemon and ESM
Published on: 2021-10-01
tags: TypeScript, Node.js, JavaScript
Let’s try to set up a Node.js/Express.js TypeScript project with nodemon and ESM!
Yesterday someone in the ZTM Discord server asked if it was possible to use nodemon with TypeScript and native ECMAScript modules.
It is!
I used Node.js (version 14 works) and a bit of internet sleuthing to figure out how to do it.
TypeScript
Create a new directory. Inside that directory, we’ll need to initialize a new Node.js project:
npm init -y
Now for the dependencies. First, Express.js:
npm i express
As development dependencies, we use TypeScript, nodemon, ts-node and the necessary types:
npm i --save-dev typescript nodemon ts-node @types/node @types/express
Now, TypeScript setup:
tsc --init
The above command creates a new file called tsconfig.json. Adjust the following:
{
"module": "ES2020",
"moduleResolution": "Node"
}
Add the following to package.json:
{
"type": "module"
}
Minimal Server
Let’s create our source code. Make a new folder called src and add a file called index.ts inside that directory.
Here’s a minimal Express server:
import express, { Request, Response } from 'express'
const app = express()
const port = 5000
app.get('/', (req: Request, res: Response) => {
res.json({ greeting: 'Hello world!' })
})
app.listen(port, () => {
console.log(`🚀 server started at http://localhost:${port}`)
})
Wiring Up Scripts
Now, the magic will come together. Add the following script to package.json:
{
"scripts": {
"dev:server": "nodemon --watch './**/*.ts' --exec 'node --loader ts-node/esm' src/index.ts"
}
}
First, we’ll use nodemon with the --watch flag to keep track of all TypeScript files. We can use --execute to run other scripts.
We use the experimental loader feature with hooks to run ts-node. We need the library so that we can directly run TypeScript on Node.js:
It JIT transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling. This is accomplished by hooking node’s module loading APIs, enabling it to be used seamlessly alongside other Node.js tools and libraries.
Start the server now:
npm run dev:server
Yay, it works!
Thoughts
It was a bit tricky to find out how to pair nodemon with the Node.js loader feature. While you’ll get console warnings about using this experimental feature, it works fine on the latest Node.js v14.
Success.
Resources
- Use TypeScript to Build a Node API with Express
- TypeScript and native ESM on Node.js
- ts-node on GitHub
- Restart Your Server When Changing Your TypeScript Code
Thank you for reading my blog.