A simple guide to hosting your single page application
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.
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
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
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
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
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
“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
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
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
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
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.
I made my changes, all the unit tests passed and even the build pipeline generated a…