The starter template you need
Tags: webdev, beginners, tutorial, javascript
Published: 2021-11-20 05:35:33

Just in case, here are the other parts:

- Part 1, this post 
- [Part 2](https://dev.to/tresorama/the-starter-template-you-need-part-2-mjo)
- [Part 3](https://dev.to/tresorama/the-starter-template-you-need-part-3-4p1l)

## 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](https://www.youtube.com/watch?v=zvKRKU-ex6g)
- Git
    - you need to have Git installed, don't worry if you don't know how to use it
    - [Installing Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
- npm
    - you need to have npm installed, don't worry if you don't know how to use it
    - [Installing npm](https://nodejs.org/en/)


## 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 :

```bash
node_modules
dist
.cache
.DS_Store
```
[Learn more about this .gitignore file](https://www.freecodecamp.org/news/gitignore-what-is-it-and-how-to-add-to-repo/)


### 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: 

```html
<!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:

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

After this step your `package.json` content will be :

```json
{
  "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
```bash
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 <kbd>Ctrl</kbd>+<kbd>C</kbd> to stop the localhost server.

### 1.5 - Configure SASS

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

```scss
$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:

```html
<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 <kbd>Ctrl</kbd>+<kbd>C</kbd> to stop the localhost server.

### 1.6 - Configure JS

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

Put this js code inside:

```js
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:

```js
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:

```html
<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 <kbd>Ctrl</kbd>+<kbd>C</kbd> 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

- Git
    - [Git in 15 minutes - Video](https://www.youtube.com/watch?v=USjZcfj8yxE)
- npm
    - [npm in 2 minutes - Video](https://www.youtube.com/watch?v=ZNbFagCBlwo)
- Parcel
    - [Getting Started](https://parceljs.org/getting-started/webapp/)