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:
- 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
Further Reading
- Git
- npm
- Parcel
Top comments (5)
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.
Thx, maybe works, need to test.
Ok actually I wanna say there is a bug about MHR in vite I didn’t say it clearly
I meet the problem many times and there is a issue in vite repo
Vite can not reload