Trio Icon
Trio v6.1.0

The Trio Blog

  1. Latest
  2. Releases
  3. News
  4. Tutorials

Bundling Your Site's Runtime JavaScript

javascript packages

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

  1. Create A New Project
  2. Install The Project's Dependencies
  3. Create Our Project's Build Scripts
  4. Create The Site's Default Web Page
    1. Create The index.md Fragment
    2. Create The default.html Template
  5. Create The JavaScript Application Using ES6 Modules
    1. Create The jsBundle Folder
    2. Have Trio Ignore The jsBundle Folder
    3. Create The source/jsBundle/itworked.js Module
    4. Create The source/jsBundle/main.js Module
  6. Add Additional Resources
    1. Add The happy-dance.gif Image
    2. Add The main.scss File
  7. Build And Run
    1. Build For Development
    2. Build For Release

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.5e717d2d827c90267a43d11d2920899c.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

Your Financial Support Of This Project Is Greatly Appreciated

Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.



Show your ❤️, add your ★ to the Github repo.