DEV Community

Cover image for The starter template you need
Jacopo Marrone
Jacopo Marrone

Posted on • Updated on

The starter template you need

Just in case, here are the other parts:

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:

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.
Enter fullscreen mode Exit fullscreen mode

Do not close the Terminal.

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

node_modules
dist
.cache
.DS_Store
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Go back to Terminal and run this command

npm run start
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

<link rel="stylesheet" href="scss/style.scss">
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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 !!!' );
}
Enter fullscreen mode Exit fullscreen mode

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

<script type="module" src="js/script.js"></script>
Enter fullscreen mode Exit fullscreen mode

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 !!!
Enter fullscreen mode Exit fullscreen mode

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

Further Reading

Discussion (8)

Collapse
pengeszikra profile image
Peter Vivo

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.

Collapse
lukeshiru profile image
LUKESHIRU

You should take a look at vite, is like the son of WebPack and Parcel (minimal to no configuration, excellent DX and way faster than WebPack).

Collapse
pengeszikra profile image
Peter Vivo

Thx, maybe works, need to test.

Collapse
jackzhoumine profile image
jackzhoumine

Vite can not reload

Thread Thread
lukeshiru profile image
LUKESHIRU

??? Vite comes with HMR support, you might want to take a look again.

Thread Thread
jackzhoumine profile image
jackzhoumine

I meet the problem many times and there is a issue in vite repo

Thread Thread
lukeshiru profile image
LUKESHIRU

Vite can not reload


I meet the problem...

If you had an issue "many times", that doesn't mean that the feature doesn't exist. You might want to check your config.

Thread Thread
jackzhoumine profile image
jackzhoumine

Ok actually I wanna say there is a bug about MHR in vite I didn’t say it clearly