In this article, I'll show how to add styling to our application. The starting point is where we left in step 2.

JS

To start, let's replace our dummy JS with code that at least put something on the screen. I go with vanilla JS because frameworks tend to complicate the esbuild setup. Let's set src/index.js to:

import "./style.css";

const header = document.createElement("h1");

header.innerHTML = "Hello world";

document.body.appendChild(header);

import "./style.css";- by default, esbuild has CSS loader set up, but styles are not included in JS bundle. Before we get to it, we have to add the ./style.css because now it's failing to build
const header = ... & the following lines - simple code to add element to the page. By doing it in JS, by one glimpse, we can tell if the JS is working or not.

CSS

The styling goes to ./src/style.css:

body {
  color: #66f;
}

If we build our application with npm run build or start the server with npm run start, we will see the header without the color. That's because styles are emitted to style file - with the same name as our bundle, but with .css extension.

HTML

To include the styling we have to add:

    <link rel="stylesheet" type="text/css" href="./main.css"/>

With this in place, the application should look like this:

Links

The repo, branch step 3.

You can check out my video course about esbuild.

Summary

In this article, we have seen how to add styling to our esbuild application. If you are interested in the hearing when there is a new part ready, you can sign up:

How to manage CSS with esbuild

Comments

esbuild tutorial

How to configure esbuild with a build script

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

JS

CSS

HTML

Links

Summary

Command Palette

Comments

esbuild tutorial

How to configure esbuild with a build script

More from this blog

JS

CSS

HTML

Links

Summary