Building Star Wars Crawler with Azure Static Web Apps - Part 1
Tags: staticwebapps, javascript, node, tutorial
Published: 2022-05-02 21:51:47

---
title: Building Star Wars Crawler with Azure Static Web Apps - Part 1
published: true
description: a tutorial how to create a Star Wars intro using: NodeJs, HTML, CSS and JavaScript. And then, we will deploying this application using the Azure Static Web Apps. 
series: Build a Star Wars Crawler with Azure Static Web Apps
tags: staticwebapps, javascript, nodejs, tutorial 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfk3x08jqy9c7hf0vjkq.png
---


> 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](https://azure.microsoft.com/services/app-service/static/?WT.mc_id=javascript-63934-gllemos)** - 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](https://www.youtube.com/watch?v=tGsKzZtRwxw) 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](https://code.visualstudio.com/?WT.mc_id=javascript-63934-gllemos)**
* **[Node.Js](https://nodejs.org/en/)**
* **[Azure Static Web Apps](https://azure.microsoft.com/services/app-service/static/?WT.mc_id=javascript-63934-gllemos)**
* **[Visual Studio Code Extension - Azure Static Web Apps](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps&WT.mc_id=javascript-63934-gllemos)**
* **[Azure Account](https://azure.microsoft.com/?WT.mc_id=javascript-63934-gllemos)**

---

## 2. Get Started

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

```bash
npm init -y
```
Next, we'll install **[Express.Js](https://expressjs.com/)** (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.

```bash 
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`](https://github.com/glaucia86/intro-starwars-app/blob/master/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:

```bash
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](https://github.com/glaucia86/intro-starwars-app)** 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:

```javascript
/**
 * 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](https://getbootstrap.com) for styling.

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

```bash
nodemon
```

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

[![Screen-Shot-12-20-19-at-08-03-PM.png](https://i.postimg.cc/FsLGLgX5/Screen-Shot-12-20-19-at-08-03-PM.png)](https://postimg.cc/zVqnmhf0)

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`

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

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

[![Screen-Shot-12-20-19-at-09-58-PM.png](https://i.postimg.cc/ZRj5bDL8/Screen-Shot-12-20-19-at-09-58-PM.png)](https://postimg.cc/qhhTQwSq)




### 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!**