DEV Community

Cover image for Building Star Wars Crawler with Azure Static Web Apps - Part 1
Glaucia Lemos for Microsoft Azure

Posted on

Building Star Wars Crawler with Azure Static Web Apps - Part 1

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:


2. Get Started

We start our Node.js development by creating the package.json to capture our dependencies.

npm init -y
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

6. Run your Express app

Run this basic Express application using nodemon.

nodemon
Enter fullscreen mode Exit fullscreen mode

Launch the browser to localhost:3000 to see the default web application.

Screen-Shot-12-20-19-at-08-03-PM.png

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

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

7.3 Run the App

Run the application again and see if the sentence appears:

Screen-Shot-12-20-19-at-09-58-PM.png

7.4 What Happened?

Let's understand what is happening here.

  • We imported the NewCycle font which closely resembles the original crawler.
  • We set the background to black and removed margins to provide that space effect!
  • We use the .intro class to position elements and the .intro_text class 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!

Discussion (0)