DEV Community: Aaron Lienhard

Deploying a Site with Vercel

Aaron Lienhard — Mon, 14 Mar 2022 02:05:43 +0000

What is Vercel?

Vercel is a platform that allows you to easily build, deploy, and scale a website and have it viewable to the world in literal seconds.
If you ever had trouble getting a site to build using GitHub Pages, Vercel takes away all the extra work and configures everything for you.
I've never had an easier time when it comes to deploying a website than when I used Vercel.

How to get started with Vercel

To get started with Vercel you are going to want to go to their website. The homepage will look like this:

Once here you can install Vercel either to a specific project or globally using the command below. Use the command either in a specific project directory or just as you launch terminal.

npm i -g vercel

You next step will be to login to Vercel and provide access to your GitHub account. Once your GitHub account has access you can go to your dashboard and create a project.
Once you click the create a project button you can choose a GitHub repository you will like to deploy and then it's as simple as pressing the deploy button. As long as the code is all in the correct directories and npm start is working then the website should deploy with no issues.

11ty Blog Site Deployed with Vercel

Here is an example of a blog site I created with an 11ty template. I was able to deploy the website through Vercel and have this live version for anyone to go to and look at the website.

To access the website you can click here.

ist-vercel-demo Deployed with Vercel

Here is the ist-vercel-demo we had to clone for class and then get working as a website with Vercel.

The link to the site is here.

Getting this website to deploy was as simple as clicking the button and waiting for Vercel to do its job. Seriously made creating a website one of the simplest processes ever.

How does Vercel compare to other ways of deploying as a developer

Compared to using GitHub pages and manually setting up work flows can be frustrating to say the least. Compared to Vercel it is seriously night and day with how simple you can get a repository running on the web.
If I knew someone who wanted to get their GitHub repo working online and seeing a working website, I would immediately point them to Vercel as I believe it's one of the best ways to do what they want to do.

Creating a Blog with 11ty

Aaron Lienhard — Mon, 28 Feb 2022 03:45:52 +0000

What is 11ty?

11ty is a static site generator that you can use with a variety of different templates to easily build and deploy your own website.

How to use a blog template

To begin to use 11ty by creating a simple blog, we'll first want to head over to 11ty's page with different starter projects.

You can go to that page here. You'll then come to a page that looks like this:

If you click on the source code button under the template you want, it'll then take you to that template's GitHub page.

In this post I'll click on the first template titled, "eleventy-base-blog."

From here you're going to want to press the "Use this template" button.

eleventy-base-blog repository

Once you click the button, you'll be able to create a new repository for your account and then clone that to your local system.

Once cloned, run "npm install" in the directory. Then "npx eleventy --serve" to build the website locally and run be able to access it through localhost. When you go to localhost, the base website will look like this:

Now you can follow the instructions in the GitHub repository to edit the website to add your own information. Congrats, you just were able to create a new blog website based on a template from 11ty!

1st Blog Site

My first blog was created with the eleventy-base-blog template.

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account.

Here is a picture of what the website looks like:

As well as a link to site's GitHub repository.

Blog 1 GitHub

2nd Blog Site

My second blog was created with the 11ty-starter template.

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account. Just like the first blog website.

This site is more stylized than the original site having different colored text for the post titles, a footer, and some other changes. However, the content is all the exact same.

Here is a picture of what the website looks like (example, for some reason mine wouldn't build correctly even locally):

As well as a link to site's GitHub repository.

Blog 2 GitHub

3rd Blog Site

My third blog was created with the supermaya template.

It contains a total of 4 blog posts, which are all identical to the posts on this dev.to account. Just like the first and second blog website.

This site has more links on the header, a footer that explains what the Supermaya kit is, as well as box at the top that explains what the blog is. However, the content is all the exact same as the first two websites.

Here is a picture of what the website looks like (example, for some reason mine wouldn't build correctly even locally):

As well as a link to site's GitHub repository.

Blog 3 GitHub

The Power of Docker

Aaron Lienhard — Mon, 28 Feb 2022 03:45:40 +0000

What is Docker?

Docker is an open platform that allows the user to virtually create different software packages in things called, "containers"

Why is Docker so powerful?

Docker is so powerful because you're able to very easily create software and play around with it very quickly without having to worry about a lot of the backend part of the code and how getting the server up and running works

How to use 'Play with Docker'

To start with 'Play with Docker' you'll need to head over to the website

Once you're on the website, create an account and login. Once you log in the green "login" button on the homepage will change to say "start"

Once you hit start, you'll see a page that looks like this:

Now to start playing around with Docker you can just hit the "+ Add New Instance" button" and you'll start the Docker server and the webpage will look like this:

Now you're all ready to play around with Docker, have fun!

Creating a DockerFile for our NASA Image Search repo

In order to get your own web application running in Docker you will first need a DockerFile.

Here is a link to the Docker Docs that explain what a Docker File is and how to create one. Docker Docs - Docker File

In order to actually build your Docker container you need to run, docker build -t getting-started . but replace the "getting-started" with the name of your component.

To actually start the app container all you have to do is type docker run -dp 3000:3000 getting-started into the terminal and just like last step replace "getting-started" with the component name.

Make sure you open the 3000 port through Play with Docker, or go to localhost:3000 to see the application if using the downloaded version of Docker.

Using the GeoIP Element + Wikipedia Query Tag

Aaron Lienhard — Tue, 01 Feb 2022 03:01:21 +0000

What is the GeoIP element?

The GeoIP element allows you to take a computer's ip address and convert it to both a longitude and latitude. Using this element, a webpage can instantly return a geolocation just based off of the computer's ip address that it accesses the webpage from.

Check out more information on the GeoIP at this link: GeoIP

What can we do with the GeoIP element + Wikipedia Query tag?

By using the geolocation returned with the GeoIP element, you're able to search parts of that location with the Wikipedia Query tag. When the search is completed, the query tag displays the Wikipedia article that is associated with the search term you feed the tag.

If you want to add the wikipedia query tag to your webpage, simply import it at the top of your JavaScript File using this code:

import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';

You can also check out component here

For example, if I wanted to query Wikipedia for the city and state that is returned from the element, the code would look like this:

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>

Then, if the location was "University Park, United States" then the wikipedia-query tag would return this on the webpage:

How does the GeoIP element grab this data?

The GeoIP element uses fetch(), this is what the fetch command looks like within the element:

fetch(this.locationEndpoint + userIPData.ip)

The first part of the fetch gets, "this.locationEndpoint" this part is connected to Free Geo IP. If you go to this website, then you'll get a json response that shows a json file that displays various information based on that system's ip address. Here is an example of what it shows:

{
"ip": "23.105.173.167",
"country_code": "US",
"country_name": "United States",
"region_code": "DC",
"region_name": "District of Columbia",
"city": "Washington",
"zip_code": "20016",
"time_zone": "America/New_York",
"latitude": 38.9379,
"longitude": -77.0859,
"metro_code": 511
}

The second part of the fetch grabs the user's ip data from the userIP JavaScript file. Here's the code it uses in order to get the user's ip address:

  async updateUserIP() {
    return fetch(this.ipLookUp)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        this.ip = data.ip;
        return data;
      })
      .then(data => {
        this.location = `${data.city}, ${data.country}`;
        return data;
      });
  }

Using these two data points, the element is able to convert the user's ip address that it gets and change it into a usable longitude and latitude of that ip's location.

What can we do with the longitude and latitude we receive?

With the longitude and latitude from the fetch() method, we can plug those values into a Google Maps url and embed that location's Google Map's result into the webpage. We do that using this code:

https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed

Here's an example of what that embed looks like on the website:

My github repository to view the used project's code

If you want to look at the ip-project github repo, you can do so from this link: IP Project Repository

Building Your First Web Component with Open-WC

Aaron Lienhard — Mon, 17 Jan 2022 04:44:00 +0000

Introduction

Welcome! This blog post will help you be well on your way to creating your very own web components with open-wc. In order to create your first component you'll have to download and learn about some software/tools that will be required in order to create the component. Don't worry though! This post will take you step by step through the installation process as well as help you understand a little more about the things you're installing.

This is tutorial was made on a mac machine, different operating systems may yield different results

What is NodeJS?

To start, you're going to download a JavaScript runtime called, "NodeJS." NodeJS is simply a JavaScript runtime environment that runs JavaScript code outside of the actual web browser. This allows us to build scalable network applications (About NodeJS).

Installing NodeJS

Now let's install NodeJS onto your machine! To start, head over to the NodeJS website at, NodeJS

From here, you should see a website that looks like this: ↓

You'll want to click on the big green button that says, "16.13.2 LTS - Recommended For Most Users"

Once you click on the button, it'll download a "pkg" file and from there you can run it and go through the download process. Once you're done installing NodeJS you will have also gotten NPM (Node Package Manager) installed with it, so now all that's left is to check and make sure everything is installed correctly.

Confirming NodeJS + NPM Installation

In order to confirm that both NodeJS and NPM were installed correctly, you're going to want to open up the terminal. My terminal might look slightly different from yours, that's because I'm using Oh My Zsh, which you can install through their website here: Oh My Zsh

Once the terminal is opened, it'll look something like this: ↓

From here, type in "node -v"
Assuming that everything is installed correctly, you should see something like this: ↓

As long as there is a version number displayed, that means that NodeJS was installed correctly!

Next, we just have to do the same thing but for NPM. The command in terminal to check NPM's version is "npm -v"

As long as you can see a version number for both NodeJS and NPM, then you can move onto the next section of the tutorial. If you do not see version numbers, check and make sure that you downloaded the correct version of NodeJS and that the installation finished successfully.

Creating Open-WC Web Component

In order to actually create your web component you first have to pick a file directory that you want to save it in.

The file directory for my folder is, "Documents/edtechjoker/edtechjoker-lab1"

You want to cd into the directory using the terminal, it should look similar to the image below: ↓

Once inside of the directory you want the component to live in, you should type "npm init @open-wc" into terminal. Doing so should bring up a dialog box like this: ↓

Here are the steps to actually creating the web component within the directory you specified:

❯ Scaffold a new project
❯ Web Component
❯ No
Input the name you want for the component
❯ Yes
❯ Yes, with npm

As long as you hit all the correct responses you should have created the component and get a terminal window that looks like this.

As mentioned, you can open the component by typing,

 cd hello world
 npm run start

That will launch the component within a web browser. If you type those commands now, it should look something like this: ↓

If you see a page like the one above, then you're ready to edit your code in any editor of your choice. I mainly use Visual Studio Code for web-related programming.

Editing Web Component through Visual Studio Code

You can install Visual Studio code through their website at, Visual Studio Code

Once you have Visual Studio Code installed, you should see a screen similar to this once it's launched: ↓

Follow these next steps to open the web component we just created in Visual Studio Code

File
Open
Navigate to the directory where you saved the component
Open the "hello-world" folder

You then should get a screen like this, the .js code you will want to edit is within the "src" folder

Final Product

Using Lit's Playground as a reference, I was able to make this very quick and easy Hello World web component. Hopefully you all will now be well on your way to creating web components as well!

GitHub Repository

Here is the GitHub Repository that I uploaded my web component to, My Lab 1 GitHub Repository