Running Pattern Lab

Running Pattern Labpermalink

It's as easy as running the following command:

npm run start

This will start the system and open the URL it's running on within your browser. Relevant information regarding and step and possible errors are being logged to the console so it's recommended to watch out for any problems possibly occuring with your installation or any of the content or data you're setting up.

Problems and errors after restructuring files and folderspermalink

If you're doing bigger changes especially to the file and folder structure and recognize some errors on the console like e.g. TypeError: Cannot read property 'render' of undefined or Error building BuildFooterHTML, it's recommended to stop Pattern Lab, delete the cache file dependencyGraph.json within the projects root and start Pattern Lab again, as these changes might conflict with the existing cache structures.

Running localhost via HTTPSpermalink

There might be use cases in which you'd like to let your localhost dev server run via HTTPS instead of HTTP, like e.g. when consuming from other secure contexts to prevent browser errors or problems.

Achieving this is a three-step process:

• generate a self-signed SSL certificate
• add it to the trusted certificates
• configure the certificates for live-server

Generate a self-signed SSL certificate

First, create a folder like, e.g., ssl at the root of your project.

Then run the following command in your terminal:

openssl req -x509 -nodes -out ssl/localhost.crt \
  -keyout ssl/localhost.key \
  -newkey rsa:2048 -sha256 \
  -subj '/CN=localhost' -extensions EXT \
  -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

This has been adapted from https://stackoverflow.com/a/56074120 according to the Let's encrypt instructions; additionally, DigitalOcean provides some further explanations in a tutorial.

Add the certificate to the trusted certificates

A stack overflow entry as well mentions using the following command to add the certificate to the trusted certificates, as suggested on a blog:

sudo security add-trusted-cert -d -r trustRoot -k "/Library/Keychains/System.keychain" "ssl/localhost.crt"

You could as well skip this step and accept the certificate after opening the secured pattern lab in your browser for the first time, as described in step 5 of the DigitalOcean tutorial.

Configure the certificates for live-server

According to the live-server documentation, you'll then add those certificates to the local dev server:

To enable HTTPS support, you'll need to create a configuration module.

In our case, you could, e.g., create a file called ssl.js in the ssl folder with the following contents:

var fs = require("fs");

module.exports = {
	cert: fs.readFileSync(__dirname + "/localhost.crt"),
	key: fs.readFileSync(__dirname + "/localhost.key")
};

Finally, you'll have to add this as a configuration module to the pattern lab serverOptions within the patternlab-config.json file:

"serverOptions": {
  ...
  "https": "ssl/ssl.js"
},

Et voilà, after starting the process of serving pattern lab the next time, it'll open as a secured page.