DEV Community: briangan123

Deploying sites with Vercel for beginners

briangan123 — Sun, 13 Mar 2022 22:46:20 +0000

Vercel

Vercel is a platform that makes it easy to deploy static sites and frontend frameworks. Vercel takes care of the harder things such as deployment and automatic scaling. This platform allows you to create a brand new site for deployment by using one of the templates they provide or by importing an existing application from GitHub. In this blog, I will go over how to get started with Vercel so that you can incorporate this for your own site!

Getting Started

First, you will want to head over to vercel and create a free account. Make sure to link it to your GitHub so that you can access your repositories. Vercel also allows you to use third party repos and will clone a copy for your personal use. All you have to do is enter the repo url. In this example, I used the ist-vercel-demo repository.

Before finishing deployment, I had to change the output directory to dist. Typically, if you are having issues with your output, you should change it to _site or dist depending on how your site is being deployed. If you already deployed your site and you are having issues building it, you can go to the settings and change the output directory from there.

After changing that, you should be ready to deploy. After clicking the deploy button, you should have your site ready.

From here you can view your global site and the repo associated with this deployed site.

Viewing through CLI

To be able to use Vercel in your command line interface, you will need to use these commands after you cd into the correct directory.

npm install
npm i -g vercel

Then run the command vercel dev to get started.

When I tried to go through this process using the CLI, I ran into the output directory issue again.

As I previously mentioned, this can be changed in the settings on the Vercel UI. The CLI is trying to output to "public" instead of dist in this case.

Applying this to my 11ty sites

1. Basic 11ty Site

GitHub: https://github.com/briangan123/11ty
Site: https://11ty-liard.vercel.app/

2. 11ty Based Blog

GitHub: https://github.com/briangan123/11tyLab
Site: https://11ty-lab.vercel.app/

3. Custom 11ty Resume Site

GitHub: https://github.com/briangan123/resume11ty
Site: https://resume11ty.vercel.app/

CI/CD Pipeline Comparison

Using Vercel makes the deployment of static sites very simple. Previously, my sites were deployed using GitHub pages, which was very tedious and annoying to deal with because it constantly had issues such as css not being shown and the output directory not being output correctly. Vercel offers a simple UI for developers to easy get their site running globally without the hassle. Developers can still change their code through GitHub and Vercel will update along with it, which makes the CI/CD process even more simple.

For more information about Vercel and its application, check out their website's docs and this article by Michael Potter. Vercel is the future for front-end web development and is currently used by large companies such as, McDOnalds, TikTok, Hulu, Ticketmaster, etc.

Getting Started with 11ty

briangan123 — Mon, 28 Feb 2022 23:30:35 +0000

11ty is a simple static site generator that uses the files found in the current working directory. You can use many different filetypes such as markdown, html, JavaScript, etc. There are many different ways to go about creating your first 11ty site.

Basic 11ty Site

To easily get started with 11ty, go to your command line and in the directory you want, run this command:

echo '# Page header' > README.md
npx @11ty/eleventy

This will create a blank site in the current directory. To start up the web server, you can run this command: npx @11ty/eleventy --serve. After that, you can open http://localhost:8080/README/ in your web browser to see your local page. You can edit its contents in a code editing program such as VSCode. Then you'll want to create a .eleventy.js file so that you can configure Eleventy to your site's needs. You can edit the files in the directory such as the readme.md and index.html. Here is what my basic site looks like:

You can view my GitHub code [here].(https://github.com/briangan123/11ty)

11ty Blog Template

Another way to utilize 11ty is by using prebuilt templates. For this example, I used this template from GitHub. To use this as a template, click the green button that says "use this template". It will prompt you to create a repo name and then you can create your own version.
After you created your template on GitHub, you can use your command line to keep track of changes so that you can upload it to GitHub. Again, you can edit the contents by changing some files in VSCode. Here is what my blog looks like:

Homepage

Archive page

First Blog Post

You can push your changes to GitHub to keep track of changes to your files as you add more to your site. Here is my Github repo.

Another Template

Another template I used was this.
Following the same procedures to use the template, I created my own resume site and edited the files and page content to fit my needs. Here is what it looks like:

You can see the edits I made in my GitHub repo here.

Conclusion

11ty is a powerful tool to create a static site and there are many ways to go about it. Using a template will get you up and running faster, but if you want full customizability, then you can build your site from the ground up.

Getting started with Docker

briangan123 — Mon, 28 Feb 2022 22:22:58 +0000

Docker is an open source containerization platform where developers can package applications into containers. It is becoming more popular due to organization's shift to the cloud, simplifying delivery of applications. Containers make it so that applications can be easily deployed, patched, and scaled.You won't have to install any dependencies because the container will already have everything the application needs to run. Docker provides a single place to set up and manage containers simply and easily.

Getting Started with Play With Docker

First, you'll want to head over to the Docker site and create an account. After creating an account, head over to this link and hit the green start button.

From here, you can click the "ADD NEW INSTANCE" button on the left hand side to open up the sandbox.
Now have a command line on Docker that you can play around with to open containers.

Connecting this to out NASA API project

After creating a new instance, we need to clone the GitHub repo and cd into the new directory.

Then we need to create a new file in this directory. This can be done with this command: touch "dockerfile".
Then we can edit this file by clicking the "Editor" button and searching for the new file.

In the file, we can paste this code:

FROM node:10-alpine
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
EXPOSE 3000

After adding the contents to this file, you can save it. What this does is automate commands that would need to be run in order to run the site like a script.

Now you can run docker build -t todoapp . (make sure to include the period)
Now you can create your containers using the command line. For example: docker run -dp 3000:3000 todoapp.
You can create as many containers as you want as long as you are using different ports. Otherwise, it will be overwritten.
Now to open the port, you can click the "Open Port" button and entering in the port number. Or if a button with the port number pops up, you can click that instead.
Additionally, you can run docker-compose up to run an entire app.
Congratulations, you have created a dockerfile for your container.

Images from NEWSAPI Microservice

This is the frontend of the NewsAPI microservice

This is the backend of the NewsAPI microservice

The back end of connecting to APIs

briangan123 — Mon, 31 Jan 2022 01:16:12 +0000

In this blog post, I'll be discussing the backend of how websites connect to APIs to visualize its data.

GeoIP

GeoIP is a free API that can retrieve your IP address data and other location information from your Internet Service Provider(ISP). You can view your location information using GeoIP here.

Getting data from GEOIP into Google Maps

First, in our constructor, we set the location endpoint to the GeoIP API. We refer to this API when trying to fetch its data.
this.locationEndpoint = 'https://freegeoip.app/json/';

Next, We instantiate variables we want to retrieve. In this case, we instantiated our longitude, latitude, city, and region_name (AKA State).

Then, we will fetch data from the API by using this code block:

Fetch()
In this function, we connect to the API and if successful, it will retrieve the data you specified. If not, it returns false and won't display any information from the API. This is also called a promise. This takes the URL as a parameter.

Now that we retrieved our longitude and latitude from the API and have it stored into a local variable, we can reference it in our render() function. Whenever a variable in the properties() is updated, this function is run again to obtain the updated information.

In the render() function, we declared a new variable, which will be the Google Maps link. Instead of setting a defined longitude and latitude in the url, we input the local variables, this.long & this.lat instead, so that it can update by itself.
Then, we created an iframe where a map of your location will be displayed in a little box on your website.

We can also create a hyperlink that you can click on to direct you straight to the google maps website that already has your coordinates automatically inputted. This is done in a similar fashion as the iframe, but with a different syntax. In this case, we used an href and set it equal to the Google Maps link with the local variables for latitude and longitude. We have a static zoom level set to 14 at the end of the href link. Then you can set the hyperlink to say whatever you'd like. In this case, it says "Open in Google Maps".

Wiring data into wikipedia-query tag

Now that you successfully retrieved your location data from the GeoIP API, you can use that to imbed a wikipedia article about your location.

First, you'll need to add it as a dependency by importing it with this at the top:

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

To automatically show the information about your city and state from Wikipedia, you need to use the wikipedia-query search tag and reference the local city and state variables that were instantiated and set earlier.

Now you have successfully wired the GeoIP API data to Google Maps and Wikipedia!

You can check out my repo here.

Check out these resources for more information.
GeoIP API
Wiki API Documentation

Building a basic web component with Open-wc

briangan123 — Mon, 17 Jan 2022 00:02:22 +0000

Hi, my name is Brian Gan and this is my first time coding in JavaScript. In this tutorial, I am going to show you how to build a basic web component using open-wc. If I was able to accomplish this, then so can you!

What to install

VSCode
First, you'll need to install VSCode for your respective operating system. This is where you'll write most of your Javascript code for your web component.

NodeJS
Next, you'll need to install NodeJS LTS. This is a runtime environment for developing your application and provides a library that will make developing web applications simple. Make sure you are downloading the Long-term support (LTS) version so that you won't have any critical bugs that haven't been discovered yet. You can learn more about NodeJS here.

npm
This is a package manager that comes preinstalled along with NodeJS. npm puts modules in one place so that NodeJS can find them and also helps manage dependencies so that you won't have to download them manually.

You can check to see if NodeJS installed npm by typing npm -v in the command line. This will show you what version you have. If it doesn't recognize the command, then you will need to manually install npm by typing npm install -g npm. You can learn more about npm here.

NodeJS and npm are popular among developers because it is based on JavaScript, which has been the most popular web development coding language. NodeJS is easy to learn, scalable, cross-platform friendly, light & fast, and takes advantage of caching. You can learn more about the origins and why it is so popular here.

Yarn
Yarn is similar to npm and is another package manager that is optional for this tutorial. You can also check to see if you have yarn installed with the command yarn -v.

Creating a place for all of your projects

Now, you'll want to create a directory so that you can store all of your projects. This can be done through the command line or through the GUI. For this project, my files are stored in my Documents/git/edtechjoker/ directory, but you can name it whatever you'd like. This can be done through the command line by typing mkdir -p ~/Documents/git/edtechjoker on most operating systems. For reference, I am using a Windows 10 machine and I created my directory by using the GUI.

Version Control using GitHub

If you would like to use GitHub for version control, then make sure to clone your repo into the newly created folder.

In your command line, navigate to the newly created directory by using the cd command. In my case, this would be \Users\brian\Documents\git\edtechjoker\

Create a new repo on GitHub. I named my repo edtechjoker-lab1.
Clone your repo by running git clone git@github.com:YOURUSERNAME/YOURREPO.git. Make sure to replace your username and the name of your repo.

Getting connected to Open-wc

Now that we have everything installed, we can begin to connect to Open-wc.

In your command line, navigate to the newly created directory. If you want to keep track of version with GitHub, make sure you're in the repo folder. In my case, that would be \Users\brian\Documents\git\edtechjoker\edtechjoker-lab1.
Use the command npm init @open-wc. You Should see something like this:

Initialize your project with the following settings: (Hint: you must use your arrow keys to navigate through the different settings)

New project scaffold
Web Component
Linting, Testing, and Demoing all enabled.
No TypeScript
Name it "hello-world" --You can name it whatever you'd like.
Install depencies using yarn -- if you were unable to install yarn, you can use npm instead.

Congratulations! You have successfully created a web component using Open-wc. You can view your site by going into the new folder. In my case, hello-world. Then use the command npm run start or npm start or if you installed yarn, yarn start.

If successful, it should open a new window/tab displaying your web component.

To exit, press [control] + c

Tweaking your code

This is where VSCode comes into play. Now that you have your basic web component, you can go to VSCode and open up the project folder. In my case, this is called hello-world. If you navigate to the src folder, you will see a JavaScript file. You can play around with this file to see how it changes your web component.

If you are using version control, make sure to commit and push your changes to your online repository. For example, after finishing up my changes, in my command line, I would make sure I'm in my hello-world directory (the one created using open-wc) and use the following commands:

git commit -am "YOUR MESSAGE HERE"
git push origin main
If prompted, you may need to enter your passphrase.

Now if you go to your GitHub repo, you'll see the changes in your code.

This is my GitHub repo for this project.

If you want to practice and learn more about different web components and how to integrate them into your code, I suggest you check out Lit's tutorial and play around with it.

Good luck and have fun building!