A simple guide to hosting your single page application

Cover image for this article featuring React’s logo, GitHub’s logo, and GitHub Actions logo.
Cover image for this article featuring React’s logo, GitHub’s logo, and GitHub Actions logo.
Featured logo’s left to right: React, GitHub and GitHub Actions. Image created by the author.

Introduction

I recently created a website using the Create React App starter template to demonstrate an npm package I developed. I thought it would be pretty straightforward to deploy this site using GitHub Pages, however, I was wrong. After some trial and error, I managed to sort it out. This article aims at recreating the scenario and walking you through the process of solving each problem we encounter along the way.

#1 Starting point

Let’s start with a common base. We’ll begin by creating a React app using the Create React App utility and also…


Confidently create workflow files in your GitHub repository

Screenshot of a GitHub repository over this Unsplash image

Introduction

I’ve only recently dived into GitHub Actions and I’m amazed at what it can do. To put it simply, GitHub Actions helps you create workflows — this is not limited to a CI/CD pipeline, you can also create various automation tasks like automatically labelling issues when they’re created, linting code with every pull request, notifying a Slack channel when a package is updated in the GitHub registry— and all of this is done within the GitHub code repository itself.

In this article, we’ll have a look at the fundamental components of GitHub…


Publishing tests results so you can examine them in your CI tool of choice

Cover image for this article featuring a React logo along with Jest logo
Cover image for this article featuring a React logo along with Jest logo
React logo on the left. Jest logo on the right.

The Create React App template comes with a lot of boilerplate code that should get you up and running with a simple React app in no time. You can then build on top of that and make it as swanky as you’d like.

If you open up the package.json file, you’ll see a few scripts you can run.

Create React App uses Jest as its test runner. Executing npm run test will run the unit tests that come pre-built with the app. …


Without losing your Spotify playlists and liked songs

A 3D icon concept of Spotify’s logo.
A 3D icon concept of Spotify’s logo.
Photo by Alexander Shatov on Unsplash

Introduction

For the longest time, I used to use Facebook to log in to Spotify. However, recently I thought of removing this dependency and switching over to the regular email address and password combination to log in to Spotify. A major concern I had was I might lose my playlists and liked songs over something so trivial, and it would be a total hassle to put that list back together. I couldn’t find a definitive answer, so I thought of writing this piece for anyone else who might have the same question.


Deploy your website on the edge of the Internet

Cloudflare Logo
Cloudflare Logo
Cloudflare logo over an image from Unsplash.

What is Cloudflare Pages?

So, you’re a frontend developer and have built an amazing portfolio website? It works great locally and now you’re wanting to show the rest of the world what an amazing site you’ve built, but you’re puzzled with all the various hosting options available? Some are too expensive for hosting a simple website, some are just too complex and some, well, look a bit fishy! Don’t worry — allow me to introduce you to Cloudflare Pages.

Cloudflare Pages enables you to deploy your frontend application straight from your GitHub repository. All you…


An emotional roller coaster

Photo of a mother holding her child in her arms.
Photo of a mother holding her child in her arms.
Image from Unsplash

“Yes, everything is set. We’ll stop at a diner on our way to Pune and I’ll ask her to wait in the diner and order us some food while I fill up the tank. What she won’t know is that while she waits for me in the diner, I’ll be on my way back to Mumbai,” said Rajeev.

“Are you sure you want to go ahead with this?” asked the person on the other side of the phone.

“Yes,” affirmed Rajeev, although he still sounded a bit nervous.

Rajeev was a thirty-six-year-old investment banker who lived…


Including and excluding files in your npm package

Image of a cat popping out of a box.
Image of a cat popping out of a box.
Image from Unsplash.

Introduction

After publishing an article on developing and publishing an npm package using TypeScript, I received a suggestion on Twitter to “create .npmignore in addition to .gitignore or else your dist won’t be included (if dist is in .gitignore).” While this is true (you don’t need to add a .npmignore file if you’re using the files field in the package.json file), given that all three approaches affect what get’s included in your npm package, I wrote this article to try and demystify the process.

Let’s take a look at these scenarios to understand…


We’ll also cover unit testing, test coverage, and code analysis

A picture of a dog sitting in front of boxes looking at the camera.
A picture of a dog sitting in front of boxes looking at the camera.
Image from Unsplash.

Introduction

Ever wondered how to publish your very own npm package to the npmjs.com registry? In this article, I’ll take you through the step-by-step process. We’ll start by developing a very simple npm package using TypeScript. Next, we’ll add unit tests to confirm the accuracy of the functionality we’re developing and while we’re at it, we’ll also produce a test coverage report. After that, we’ll use static code analyzers to help us improve our code quality. Finally, we’ll make use of some command-line magic to publish this package to npmjs.com. Doesn’t…


Getting the most of your time spent on social media

Collage photo consisting of multiple images from Unsplash.
Collage photo consisting of multiple images from Unsplash.
Collage photo consisting of multiple images [1], [2], [3], [4] from Unsplash.

Introduction

If you’ve watched The Social Dilemma, it becomes apparent that the goal of social media giants is to keep you on their platform for the longest time. Based on your likes, interests, engagements, time of the day and so many other factors, the intelligent computers running complex algorithms are able to show you more content that you might find interesting and keep you active by giving you regular dopamine shots. …


And resolving a malformed Azure DevOps Extension package error

VSIX logo placed on a background image from Unsplash.
VSIX logo placed on a background image from Unsplash.
VSIX logo placed on a background image from Unsplash

Introduction

I was recently updating my Azure DevOps Extension that I had published in the Visual Studio Marketplace. The last time I made an update to this extension was in 2019 but I already had everything in place including a DevOps pipeline, so I thought this should be easy. Well, almost. When I got to publishing the extension, I encountered an error. This article aims at unpacking the error and the solution applied to fix this.

Problem

I made my changes, all the unit tests passed and even the build pipeline generated a…

Clyde D'Souza

Software developer. Teaches online at @skillshare. Created @lightnsparknpo. Author of http://mamatellmeastory.clydedsouza.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store