Bundling Your Site's Runtime JavaScript
Intention Of This Tutorial
This tutorial is based on this repo and demonstrates how to integrate the bundling of your site's JavaScript runtime into Trio's build and release work flows. While this tutorial uses the bundler Parcel to create the JavaScript runtime you are free to use your JavaScript bundler of choice.
Prerequisites
This tutorial assumes that you have Trio installed and that you have a basic knowledge of how to use Trio's project assets to create web pages.
Steps
- Create A New Project
- Install The Project's Dependencies
- Create Our Project's Build Scripts
- Create The Site's Default Web Page
- Create The JavaScript Application Using ES6 Modules
- Add Additional Resources
- Build And Run
Create A New Project
From the terminal please run the following command to create a new bare Trio project
trio new <path/to/project>
and make it the current working directory.
Install The Project's Dependencies
From the terminal please run the following command to create the package.json file
npm init -y
and then please run the following command in the terminal to install the project's development dependencies:
npm i -D parcel-bundler concurrently
Create Our Project's Build Scripts
Now we will add a few scripts to package.json's scripts property that will be used for building our site for both development and for release.
Using your editor, please open the package.json file and then replace its "scripts" property with the following and then save the file:
"scripts": {
"parcel-watch": "parcel watch source/jsBundle/main.js --no-cache --out-dir source/scripts --public-url /scripts/",
"trioBuild": "trio b -I",
"build": "concurrently --kill-others \"npm run trioBuild\" \"npm run parcel-watch\"",
"release": "trio r && parcel build source/jsBundle/main.js --no-cache --out-dir release/scripts --public-url /scripts/ && trio c -m && trio s -r"
},
The build script is used to build the site for development and the release script is used to build the site for release. If you aren't familiar with the differences between the two here's an explanation.
Create The Site's Default Web Page
Create The index.md Fragment
In the source/fragments folder create a new file named index.md and then copy and paste the following markdown into it and then save the file:
<!--
template: default
appendToTarget: true
title: Bundling With Parcel
-->
Create The default.html Template
In the _source/templates folder create a new file named default.html and then copy and paste the following markdown into it and then save the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/main.4b032a8bb77734ada3ae34e1a6cf849f.css">
<script defer src="/scripts/main.js"></script>
</head>
<body>
<main data-trio-fragment>
<d class="something-went-wrong something-went-wrong--shown">
<h1>Bundling With Parcel Example</h1>
<p class="copy copy--error">Whoops! Something went wrong.</p>
</d>
<d class="it-worked it-worked--hidden">
<h1>Bundling With Parcel Example</h1>
<img src="/media/happy-dance.gif"alt="happy dance gif image">
<p class="copy">JavaScript bundling worked<span class="exclamation">!</span></p>
</main>
</body>
</html>
Create The JavaScript Application Using ES6 Modules
Create The jsBundle Folder
First we must create a folder to host our site's JavaScript bundle. In the project's source/ folder please create a new child folder named jsBundle/.
Have Trio Ignore The jsBundle Folder
Now we must instruct Trio to ignore the jsBundle folder so that it wont respond to changes we make inside of it which would interfere with its build and release workflows. Please copy and paste the following into the trio.json file located in the project's root folder and then save the file:
{
"ignore": "jsBundle"
}
Create The source/jsBundle/itworked.js Module
In your site's source/jsBundle folder please create a new file named itworked.js and then copy and paste the following code into that file and then save the file.
export default () => {
document.getElementsByClassName("something-went-wrong")[0]
.setAttribute("class","something-went-wrong something-went-wrong--hidden");
document.getElementsByClassName("it-worked")[0]
.setAttribute("class", "it-worked it-worked--shown");
};
Create The source/jsBundle/main.js Module
In your site's source/jsBundle folder please create a new file named main.js and then copy and paste the following code into that file and then save the file:
import itworked from "./itworked";
itworked();
Add Additional Resources
Add The happy-dance.gif Image
Please copy the happy-dance.gif image below to your project's source/media folder.
Add The main.scss File
In your project's source/scss/ folder please create a file named main.scss and then copy and paste the following into it and then save the file:
$font-size: 2rem;
main {
width: 100vw;
}
h1 {
color: #a03b9d;
font-size: $font-size;
text-align: center;
}
img {
max-width: 30rem;
min-width: 10rem;
margin: auto;
height: auto;
}
.copy {
color: #edb83a;
font-weight: bold;
font-size: $font-size;
&--error {
color: #f00;
}
text-align: center;
}
.exclamation {
color: black;
}
.something-went-wrong {
display: flex;
flex-flow: column nowrap;
font-size: $font-size;
&--hidden {
display: none;
}
}
.it-worked {
display: none;
&--shown {
display: flex;
flex-flow: column nowrap;
}
}
Build And Run
Please open your terminal and make sure that this project's root folder is the current working directory.
Build For Development
Please run the following command to build the project for development and serve it in the browser:
npm run build
Build For Release
Please run the following command to build the project for release and serve it in the browser:
npm run release