DEV Community: Erik

Developer Experience with Vercel

Erik — Sun, 13 Mar 2022 20:36:21 +0000

What is Vercel?

Vercel is a platform that allows you to import existing applications or make new ones from a template and deploy them easily. Vercel is based on UI functions which makes the developer experience much easier, and it offers many customization options.

Companies like Marvel, McDonald's, IBM, and more use Vercel for use cases such as marketing, news, and ecommerce. In this article, we will walk through deploying a basic application and 11ty sites with Vercel, as well as discuss why Vercel may be the best choice for your application's CI/CD pipeline. For further reading on Vercel, check out their documentation, or this article by Michael Potter at Red Hat.

Deploying an application with Vercel

To get started, be sure to have a GitHub account as it will need to be linked to your Vercel account. An existing repository with an application is also necessary to continue. Once your accounts are linked, go to your Vercel Dashboard and click + New Project. Import the application repository from your GitHub account, give this project a name. You are free to change the settings shown in the following screenshot.

One setting I recommend altering is the Output Directory to ensure the project builds and deploys correctly. In my case, my application's output directory is called _site. It can be left at default, but I found issues with building the project with Vercel in doing so.

Click Deploy, and Vercel will take care of building and deploying your application! To update the build or to get it to run initially, push code to your Git repository and Vercel will do it automatically.

Deploying 11ty Sites with Vercel

Deploying an 11ty site is just as easy! Follow the same steps: import your Git repo with the 11ty site into Vercel, change any settings or leave the defaults, and hit Deploy. This shows how easy Vercel is to use, and how versatile it can be with different types of applications.

CI/CD Pipeline Comparisons

In the CI/CD pipeline, Vercel is the quickest and easiest to work with that I have used. In combination with GitHub actions, Vercel works automatically every time you push code to the connected repo, and the build and deployment is fully customizable through a user interface. In the past, I used code in a YAML file in my CI/CD pipeline. This works, but the user interface Vercel has makes this much easier to maintain. The developer experience with using Vercel is great since it is so versatile, customizable, and "just works" for any of your applications.

Creating a DockerFile for an Application

Erik — Fri, 25 Feb 2022 20:52:25 +0000

What is Docker?

Docker is a platform for developing, shipping, and running applications. Docker is a very powerful tool because it allows you to run applications in environments called containers. Numerous containers can be run on a single host, and they provide isolation and security for the applications packaged inside. The containers themselves are lightweight and contain everything needed to run the application, so nothing is required from the host to run anything. Docker provides fast, consistent delivery, and rapid deployment of applications. In this article we will walk through how to deploy an app with Docker, and see how to create a DockerFile for an existing application

'Play with Docker'

'Play with Docker' is an easy way to use Docker and deploy applications. To start using it, first sign up for Docker Hub. Once you have an account, go here and log into your Docker account to start using 'Play with Docker'. Sessions last 4 hours, and all work is deleted once the time is up.

Deploying the NewsAPI Microservice

First Steps
Within the playground, click '+ADD NEW INSTANCE'. Once the console loads, run git clone https://github.com/heyMP/news-api-workshop && cd news-api-workshop to clone the repository with the API to and change directory to the local repo. An API key and the url of your Docker playground need to be specified, so run cp dot.env.example dot.env to generate the settings file. A dot.env file was created, so navigate to the 'EDITOR' button and find it. Once opened, you should see a file similar to the following screenshot, with fields for the API key and url (NEWS_ENDPOINT).

Get API Key and URL of Docker Playground
Go to the News API site to create an account, login, and generate an API key. Once you obtain the key, paste it into the NEWS_SERVICE_API_KEY field in the dot.env file. To get the url for the news endpoint, go back to your Docker playground and click 'OPEN PORT'. When prompted, set port 4000 to be opened. Click OK, and you should see a blank page. Copy that url and paste it into the NEWS_ENDPOINT field in the dot.env file. Save the dot.env file.

Run Docker
Back in the terminal, run docker-compose up to build the Docker image. Two ports will show up as opened, 80 and 4000. If you've done everything properly, you will be taken to a screen that looks like the following screenshot when you click 80.

Creating a DockerFile for an Existing Application

Getting an existing app to work with Docker is simple; you just need a DockerFile! An example DockerFile can be found below:

FROM node:12-alpine as dev
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm", "start" ]

FROM node:12-alpine as build
WORKDIR /app
COPY --from=dev /app /app
RUN npm build
CMD [ "npm", "build" ]

FROM nginx as prod
COPY --from=build /app/_site /usr/share/nginx/html

This should be named Dockerfile and placed in the root directory of your application. Note that this is not the Docker image required to run the application, this is only the text file with a list of commands to be used by a Docker command. The command is docker build -t <appname> ., which builds the application using the Dockerfile. Do not forget the . at the end of the command. After this command executes, a container can be instantiated by running the command docker run -d -p 3000:3000 <appname>. Your application is now deployed with Docker!

Getting Started with 11ty

Erik — Fri, 25 Feb 2022 20:16:38 +0000

11ty is a static site generator that is extremely flexible and customizable. Multiple templates can be used, and it can be written in many different languages including JavaScript and Markdown. In this article we will walk through how to set up your first 11ty site from scratch and with templates, and compare the user experiences of both.

Creating a Site

We will follow the guidelines here to create the first website, but first you need to have at least version 12 of Node.js. Once you have Node 12 or higher installed, create a directory to put your site and run the command npm init -y to create a package.json file that is required for 11ty to run. Next, install and save 11ty to the package.json by running npm install --save-dev @11ty/eleventy. 11ty will need files to run, so create an index.html file in your directory, and add some content to it. You can run 11ty by typing the command npx @11ty/eleventy to compile any files you create, and then npx @11ty/eleventy --serve to run the site locally. Go to http://localhost:8080/ to see your site in action!

Using a Template

Using an 11ty template is just as simple. First, find a template like the one here. Store this repository locally, and configure the template like you did above! Below I have linked three Git Repos and screenshots of the 11ty sites I generated with them for you to check out:

11ty Blog from scratch repository

11ty Base Blog Template repository

11ty Captain's Log Template repository

User Experience

Let's compare the experience with making an 11ty blog from scratch and with templates. Starting from scratch is a good option if you want complete control over what you want your blog to look like. You can edit templates, but starting from scratch allows you to control every little detail. One downside to starting from scratch is that everything must be built from the ground up, from styles to content.

Making a blog with a template makes development easier since there is preexisting structure and styling, so you don't need to worry as much about that and can work right away on the content. The one downside to using templates is that you need to understand that predetermined structure, and if they use any languages or tools you are unfamiliar with, you will need to learn them to be able to fully edit the template.

Conclusion

Overall, 11ty is a powerful tool to create good-looking blogs. Whether you choose to build a blog from scratch or use a template, 11ty makes static site generation easier for all developers.

Wikipedia's API, and Using 'wikipedia-query' to Fetch Articles

Erik — Mon, 31 Jan 2022 01:42:14 +0000

Let's say you want to display information about a company, city, or your favorite food on your website. Of course you could just write it out yourself, but what if something changes or gets updated with better information? You can use Wikipedia's API to find an article from their website using regular search terms. In this blog, we will find out how to do this, but first we will talk about the fetch() JavaScript function. I will use my project here as an example.

fetch() is an asynchronous function, meaning it can execute as other code is running at the same time; it will return whatever data is gathered whenever it can and the rest of the code continues on. It is used for HTTP requests and responses. You can learn more about the function here. In my example, the fetch function is used to return a JSON response with information about the user's location from https://freegeoip.app/json/. Once the function receives the information, it returns it and the code within .then executes.
Example JSON retrieved from fetch()

{
"ip": "192.0.2.1",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16803",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

From here, my code takes the information from the JSON response and stores it for later use in the Wikipedia query, as seen in this screenshot. I specifically use city and state for the query.

MediaWiki API

We will begin with looking at the API itself. This API can perform many different actions and be utilized in very specified ways dependent on the use case, but we will focus on the action, origin, and format parameters here. Full documentation of the API can be found here.

origin sets the originating domain of the information being queried. In my instance, this is set to '*' to signify a non-authenticated request which still works, but some user-specific functions are disabled.
action specifies which action is to be performed. In our case, we will set this to 'query'.
format is self explanatory, and specifies what format the information will be returned as. In my case, it is set to return JSON.

When performing action=query, some more parameters can be specified. In my case, I use prop and set it to 'extracts' in order to get the plain text of the given page being fetched, as well as titles which specifies what the title of the page to be returned. This is set to be the term being queried in wikipedia-query.

wikipedia-query

Now it's time to implement the MediaWiki API. The code pictured above is the block within the wikipedia-query tag that uses the MediaWiki API. It uses fetch() to send a query via the API, and the query has the titles parameter set to a variable. I use three wikipedia-query tags to display the city and state, just the city, and just the state of the user using the data that was stored earlier from https://freegeoip.app/json/. In the picture below, you can see how the search term is constructed in my code.
So, in this example, three queries are sent to the MediaWiki API: one with title set to State College, Pennsylvania, one set to State College, and one set to Pennsylvania. The following picture shows a portion of what is returned from the MediaWiki API, what isn't shown is just the rest of the article.

You can see the that 'title' is the search term, and extract is the HTML version of the Wikipedia article for State College, Pennsylvania. The page id is also given.

In summary, my example fetches a JSON response with the user's location information and stores it. The wikipedia-query tag invokes the MediaWiki API, takes the search term (in my case, city and state, city, and state in three separate queries), and sets the API 'titles' parameter to that term. The MediaWiki API then sends the query and retrieves the Wikipedia article for the given title (aka search term) in JSON format.

An Introduction to Open Web Components

Erik — Sun, 16 Jan 2022 23:45:14 +0000

JavaScript is used widely across the internet, as it is natively run in your web browser. As a web developer, familiarizing yourself with JavaScript is vital to success. Open-wc streamlines aspects of development and utilizes Node.js and npm. From the open-wc Git Repository's README: "Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project."

What do Node.js and npm have to do with JavaScript? Node.js is a cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. The Node Package Manager, or npm, is a software registry of over 800,000 packages installed alongside Node.js according to w3schools. Node.js is one of the most popular tools for open-source developers to work with JavaScript. In this article, I will walk through the steps required to start using open-wc on a Windows machine.

Getting Started

First things first, you will need an IDE to work with JavaScript. You may use any IDE you are comfortable with if it is compatible with JavaScript, but I will be using Visual Studio Code which can be downloaded here.

Installing Node.js and npm

To install Node.js, go here. Get the most current LTS version for your operating system for the best stability, or the latest current version for new features at the cost of some stability. Since npm is included with the Node.js install, you should now have both; open your terminal and enter node -v to check if Node.js was installed, and npm -v to check if npm was installed. You're all set to continue if you see version numbers after running those commands.

Starting a new open-wc project

To begin with open-wc, make a directory to put your project in. Change your terminal directory to this new location, and enter npm init @open-wc. If everything has been installed correctly, this should run and you can now begin working on your open-wc project. I initialized my project with these options:

New project scaffold
Web component
Linting, Testing, and Demoing enabled
No TypeScript
Install using npm

The hello-world element is located in the /src/ folder to be edited further. And with that, you have just created your first web component!