Javascript is currently blowing my mind at the moment with the sheer control you have to manipulate web pages in dynamic ways. Express is one of the most popular web frameworks and gives you the ability to do full-blown web development a la Ruby on Rails without the need to switch languages. Add in light-touch css framework Tailwind CSS and you can build sweet-looking websites really quickly.
Express is a web framework for Node.js so before we start, make sure you have the following packages installed on your machine:
- Node.js
- npm javascript package manager
- PostCSS (we’re gonna need this for Tailwind)
An Express app with one command
Using npm we can get an Express app set up with literally one command:
$ npx express-generator my-awesome-app --view=ejs
This creates the my-awesome-app directory as well as all of the subdirectories required for the app. The view argument determines the file type of the views that we want (I’m using ejs but you can use jade, or pug). You can immediately boot up the app to make sure it works and get going right away:
$ cd my-awesome-app $ npm update $ DEBUG=my-awesome-app:* npm start
Not very fancy but it’s up and running!
Tailwind CSS
I’m a big fan of utilising CSS frameworks to get good-looking layouts in projects from the get-go (you can see how to get Bootstrap into a jekyll blog here) and Tailwind allows you all that utility but boasting a lot more flexibility than Bootstrap.
Navigating to the project, we’ll initialise Tailwind via npm. This will add Tailwind CSS to your nodule_modules directory and create a tailwind.config.js file in your route which will be referred to in your postcss file (next step).
$ cd my-awesome-app $ npm install tailwindcss $ npx tailwind init
In order to load the Tailwind components at run time, we need a PostCSS config file:
$ touch postcss.config.js
And then populate it with the following:
module.exports = {
"plugins": [
require('tailwindcss'),
require('autoprefixer')(),
]
}
We also need a reference to the Tailwind CSS styles in it’s own css file:
$ touch public/stylesheets/tailwind.css
Which is populated with the following:
@tailwind base; @tailwind components; @tailwind utilities;
Once this is all set up we can then add a script to our package.json file which will use postcss to load the Tailwind components referred to in our new css file into our default stylesheets css file created by Express. If you followed the steps above then there will already be a script entry, make sure you replace it with:
"scripts": {
"start": "npm run build:css && node ./bin/www",
"build:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"
},
So how do we know if Tailwind has been successfully loaded? Well let’s add a button to our home page (./views/index.ejs) using some classes generated by Tailwind:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body class="ml-8">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
Smash this button
</button>
</div>
</body>
</html>
If all is well then when you boot up the app you should see a nice shiny button on your home page!
