Hi friends!! Today's post will be very different! It's an epic blog post - because we know May 4 is a special day, right?
Today I'll explain how we can develop the _Star Wars Intro) using HTML, CSS, JavaScript and Node.js. Then, I'll teach you how to host our application using Azure Static Web Apps - a hosting service from Azure with a free tier that is perfect for such personal projects.
Here we go!
1. Introduction
Every Star Wars fan knows how the Intro works - but here's a video for those who may not have seen it, or forgotten what it looks like. This is the intro experience we'll be building right now. We'll make use of these resources for our development:
- Visual Studio Code
- Node.Js
- Azure Static Web Apps
- Visual Studio Code Extension - Azure Static Web Apps
- Azure Account
2. Get Started
We start our Node.js development by creating the package.json to capture our dependencies.
npm init -y
Next, we'll install Express.Js (for our app) along with other dependencies for our development environment. For instance, I like to use eslint to keep my project organized - so I'll install and configure it.
npm install express --save
npm install eslint --save-dev
npm i nodemon
npm i eslint-friendly-formatter
npm i prettier
npm i husky --save-dev
Check my source repo for the final package.json file for comparison. Great! Let's keep going!
3. Create App Structure
Let's set up the following project structure (using the command line or an IDE) in your default project folder:
app.js
public/
css/
style.css
js/
intro.js
index.html
I prefer to use Visual Studio Code as my IDE - this is what my project structure looks like when I am done.
4. Update app.js
We'll need to use Express.js since we're creating a static web application using Node.js. Copy the following code into your app.js file:
/**
* File: app.js
* Description: File responsible for running the application
* Data: 05/04/2022
* Author: Glaucia Lemos <Twitter: @glaucia_lemos86>
*/
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('App - Star Wars Intro');
});
app.listen(3000, () => console.log('Application is running on port 3000!'));
5. Update index.html
To test if that simple Express application works, copy the following code into the index.html file. As you can tell, I'm using the Boostrap framework for styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Star Wars Intro App</title>
</head>
<body>
<script src="js/intro.js"></script>
</body>
</html>
6. Run your Express app
Run this basic Express application using nodemon.
nodemon
Launch the browser to localhost:3000 to see the default web application.
It should look something like this - this confirms we have configured Express correctly. 🎉
7. Build That App!
Every crawler starts with this famous sentence:A Long Time Ago, in a galaxy far, far away....
So - let's develop our first code block and write that opening sentence. To do this, we are going to modify the following files. Go ahead and copy these over - and we'll walk through what they do next.
7.1 index.html
<!DOCTYPE html>
<html>
<head>
(...)
</head>
<body>
<section class="intro text_intro">
A Long Time Ago, in a galaxy far,<br> far away ...
</section>
<script src="js/intro.js"></script>
</body>
</html>
7.2 style.css
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
body {
margin: 0;
background: #000;
overflow: hidden;
}
.intro {
position: absolute;
top: 40%;
left: 20%;
z-index: 1;
}
.intro_text {
font-family: "News Cycle", sans-serif;
color: #00BFFF;
font-weight: 400;
letter-spacing: .1em;
}
7.3 Run the App
Run the application again and see if the sentence appears:
7.4 What Happened?
Let's understand what is happening here.
- We imported the
NewCyclefont which closely resembles the original crawler. - We set the background to
blackand removed margins to provide that space effect! - We use the
.introclass to position elements and the.intro_textclass to apply the font. - Set the crawler to use this class for your banner text - and you're done!
Beautiful, isn't it?! But wait - shouldn't the banner be moving? Yes, yes it should! Look for Part 2 of this series where I tell you how you can get that done with the magic of JavaScript!!
May the Fourth be with you!
Top comments (0)