Jacopo Marrone @tresorama

Posted on Nov 20, 2021 • Updated on Dec 5, 2021

The starter template you need

#webdev #beginners #tutorial #javascript

Just in case, here are the other parts:

Part 1, this post
Part 2
Part 3

Overview

At the end of the tutorial you'll be able to start coding a web project in no time, with zero configuration.

The template includes:

import & export of JS module
SASS / SCSS on top of CSS
Hot Reloading, (browser auto refresh on code changes)
Fast "publish" as live website.

How this guide is structured

In the first part (the one you're reading), we will create the template inside our local computer.

In the second part we save our template in GitHub (the "cloud" for code). In the future ,every time you need to start a new project you download this template and start coding.

In the third part we add "publish to a website" feature to our template.

What you should have installed

What you should know/have installed:

moving between directory with terminal
Git
- you need to have Git installed, don't worry if you don't know how to use it
- Installing Git
npm
- you need to have npm installed, don't worry if you don't know how to use it
- Installing npm

Part 1

1.1 - Create a Local Repo on Your Computer

Create a folder named my-starter inside Desktop.
Open terminal, and go inside my-starter with the command line.
Run below commands in the terminal, one after the other.

git init
# Initialize as Git repo.

npm init -y
# Initialize NPM.

npm i -D parcel
# Install Parcel package.

Do not close the Terminal.

Create a .gitignore file inside my-starter directory, with this content :

node_modules
dist
.cache
.DS_Store

Learn more about this .gitignore file

1.2

Create a sub-directory of my-starter named src, here we'll store our code.

1.3 - Create an HTML Page

Create a file, src/index.html with this content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub Pages Blazing Fast Starter</title>

  <!-- Put SCSS/CSS Here -->

</head>
<body>

  <h1>Fast HTML JS SCSS on GitHub Pages</h1>

  <!-- Put JS Here -->

</body>
</html>

1.4 - Configure Parcel

Open package.json file with a text editor.
Edit it so that it contains these lines inside "scripts" block:

{
  ...
  ...
  "scripts": {
    "start": "parcel ./src/index.html --open",
    "build": "parcel build ./src/index.html"
  }
}

After this step your package.json content will be :

{
  "name": "my-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel ./src/index.html --open",
    "build": "parcel build ./src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.1"
  }
}

Go back to Terminal and run this command

npm run start

If all it's correct now you'll see your browser on http://localhost:1234/, showing your html page.

In the terminal, press Ctrl+C to stop the localhost server.

1.5 - Configure SASS

Create a file,src/scss/style.scss with this content:

$bg-color: black;
$text-color: white;

body {
  color: $text-color;
  background-color: $bg-color;
}

Open src/index.html, add this line at the end of <head></head> tag:

<link rel="stylesheet" href="scss/style.scss">

Check if it's working by running npm run start in the terminal again.

If all it's correct now you'll see your browser open on http://localhost:1234/, showing your html page with black background and white text.

In the terminal, press Ctrl+C to stop the localhost server.

1.6 - Configure JS

Create a file ,src/js/utilities.js.

Put this js code inside:

export const appendTextToPage = (text) => {
  const el = document.createElement('h2');
  el.innerHTML = text;
  document.body.append(el);
}

Create an other file, src/js/script.js.

Put this js code inside:

import { appendTextToPage } from './utilities.js';

document.addEventListener("DOMContentLoaded", app );

function app() {
  appendTextToPage( 'Javascript Working !!!' );
}

Open src/index.html, add this line at the end of <body></body> tag:

<script type="module" src="js/script.js"></script>

Check if it's working by running npm run start in the terminal.
You should see your browser open on http://localhost:1234/, showing your page.

You should see a line of text inside the page saying

Javascript Working !!!

In the terminal, press Ctrl+C to stop the localhost server.

Part 1 Completed - What have we achieved so far ??

So far, we have created our template, and it is also a Git Local Repo.
In our Template we can use :

SASS to manage our CSS better
use JS Features like import/export that let us split code in multiple files.
Hot Reloading

The next goal is to save our template in a safe place, from where we can download it when we need to bootstrap a new project.

Part 2 will be available on 28 Nov 2021.

If you found this blogpost interesting, if something is not clear or you get some error, let me know in the comments.

Extra

Top comments (5)

Peter Vivo • Nov 20 '21

parsel bundler is good and zero config bundler for small project, but when project complexity reach some point webpack is much more stable option ... a little bit harder configuration setup, thx for this post.