General

Deploying Web Applications with DigitalOcean and Azure

Published Aug 23, 2021

Updated Oct 27, 2023

6 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Building Modern Web Applications with DigitalOcean and Azure

It has never been easier to deploy web applications. With every passing year, there seems to always be some new service or platform with a mission to make it easier for developers to launch their applications into the cloud.

In the latest couple of episodes from Build IT Better: Platform, we dive into two of the major players in the realm of application deployment.

DigitalOcean

It's not just, "Hey, here's the hardware, do something. It's more like, let us help you build whatever it is you need to build. -- Chris Sev

If I were to summarize the value proposition of DigitalOcean, I'd call it "Simplicity, without Compromise". There are some incredibly big fish out there in the ocean of cloud computing, namely some whales like AWS, Azure, and Google Cloud Platform.

This being said, DigitalOcean has carved out its corner of the cloud computing market by expressing the value of simplicity. Instead of freezing small and medium-sized businesses with feature complexity (AWS and Azure have over 200+ services for example), DigitalOcean eases the developer in with beautiful guided documentation, and simple service offerings.

During this episode of Build IT Better with DigitalOcean Sr Developer Advocate, Chris Sevilleja, he mentioned 3 services that stood out for him across DigitalOcean's offerings.

The $5 Droplet

DigitalOcean's $5 droplet offering has a special place in my developer heart. Being such an affordable option, DigitalOcean's droplets were the very first place I've deployed a website to the greater internet. What's incredible to me, looking back on this fact years and years later, was just how much of a miracle this was for my junior self. With little to no knowledge, and JUST following their documentation, I was able to accomplish:

Nginx server blocks to host multiple websites
SSL Certificates with Certbot
Databases such as MySQL and MongoDB
and much more!

To learn how to configure and manage your own VPS, check out DigitalOcean's Initial Server Setup Guide, and also their guide on How to Setup a NodeJS Application for Production.

With the rise of ever-increasing options for easily deploying applications at scale (Netlify, Heroku), DigitalOcean needed a way to compete outside of simply easily provisioning VPS's.

App Platform

Entering General Availability on October 6th, 2020, DigitalOcean's App Platform was their answer to simplifying the Platform-as-a-Service space. With a few simple clicks, DigitalOcean will hook into a git repository, and automatically build and deploy the application on every commit.

App platform will even run containerized applications pulled in from DockerHub!

Along with deploying services right from their repositories or Docker images, App Platform abstracts away many other aspects of app operations.

SSL Certificates are automatically created, managed, and renewed
Application components can be created in a single click
- Static Sites
- Web Services
- Workers
- Databases
- Jobs
Easily scale application horizontally by adding more containers, or vertically by increasing container size
Built on top of Kubernetes, can be exported to Managed Kubernetes

Managed Kubernetes

One of the leading orchestration technologies is the open-source solution Kubernetes. To make it easier to deploy a Kubernetes orchestrated deployment, DigitalOcean has created their Managed Kubernetes solution so that developers can create Web Apps and also deploy, scale, and manage APIs and back-end services all with Kubernetes. Here are a few highlights of this feature:

Full Kubernetes API
Have a Kubernetes cluster in minutes and pay for only the DigitalOcean resources used
100% managed
Guided Configuration
Global availability

Azure

Azure is one of the big fish in the sea of cloud providers. With over 200+ services, a developer, given enough time to figure things out, can deploy anything on this platform. Just like DigitalOcean though, Azure needed a way to compete with the growing number of services becoming available allowing developers to more easily and affordably deploy solutions (Netlify, Heroku, Vercel, etc).

Azure Static Web Apps (SWA's)

During the episode featuring Azure Developer Engagement Lead, Sherry List, and Azure Cloud Developer Advocate, Chris Noring, we spoke about one of Azure's latest products, Azure Static Web Apps.

Entering general availability on May 12th, 2021, Azure Web Apps offer a similar experience to DigitalOcean's App Platform. The big value-add for Azure SWA's though is their tight integration with the Azure ecosystem of services, along with first-class integration with GitHub and Azure DevOps.

Link to documentation for creating Azure Static Web App here.

In general, creating an Azure Static Web App on top of an existing static application is as simple as running a command available from Azure's Visual Studio Code extension. Running that command creates a GitHub workflow for CI/CD with GitHub Actions.

Key features:

Web Hosting for static content
Integrated API support via Azure Functions
Globally distributed static content
Free SSL certificates
Custom Domains
Authentication Provider Integrations with Azure Active Directory, GitHub, and Twitter
Generated staging versions

API with Azure Functions

One of the big value adds of Azure Static Web Apps is its integration with the Azure ecosystem, and this is highlighted when it comes to creating a back-end API powered by Azure Functions. Adding an API to an existing Azure Static Web App is as easy as creating the SWA itself, with a command from the Azure extension.

This places Azure SWA's on the same platform as Netlify Functions and NextJS API Routes in terms of easily deploying a serverless backend API for our web applications.

Link to documentation for adding API to Azure Static Web App here.

Conclusion

The recent explosion of cloud infrastructure providers has truly made it easy for developers today to deploy affordable, and scalable, full-stack applications. The plethora of options means that developers can choose the best tool that fit's their project.

DigitalOcean is wholly geared towards simplifying the allocation of cloud infrastructure. With their VPS Droplets, App Platform, and Managed Kubernetes services, it's easy for smaller to mid-sized businesses to choose the best deployment solution that best fits their needs, whether it's from source-code or containerized images.

Azure, meanwhile, has always been one of the larger cloud providers. By creating Azure Static Web Apps, Azure mimics AWS's move in creating AWS Amplify and now stands with Netlify, Heroku, Vercel, and DigitalOcean's App Platform as a way to deploy a full-stack application.

The biggest takeaway is that there is no single one-size-fits-all solution for every type of application and business. It's essential to pick the best solution for the project at hand. If you're already invested in using different Azure services, deploying with Static Web Apps is a natural decision to continue leveraging that Azure investment. Looking to get started FAST with a containerized web service, and don't want to fuss with feature complexity? Give DigitalOcean a try.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Matthew Pagan
@mastapegs @mastapegs

Performance Analysis with Chrome DevTools

When it comes to performance, developers often use Lighthouse, Perfbuddy, or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. In this blog post, we are going to focus on where to look for signs of performance bottlenecks by using Chrome Devtools. Preparations Even when access to automated performance analysis tools is restricted, the Network, Performance, and Performance Insights tabs of Chrome Devtools can still be leveraged. To do that, some preparations can be made. When starting our analysis, I recommend opening the page we want to analyse in incognito mode. So we separate the analysis from our regular browser habits, cookies, and possible browser extensions. When we load the page for the first time, let's make sure we disable caching in the Network tab, so resources are always fetched when we reload. Some pages heavily rely on client-side storage mechanisms such as indexedDB, localStorage, and sessionStorage. Cookies can also interfere. Therefore, it's good to leverage the "Application" tab's Clear site data button to make sure lingering data won't interfere with your results. Some antivirus software with network traffic filtering can also interfere with your requests. They can block, slow down, or even intercept and modify certain network requests, which can greatly affect loading time and the accuracy of your results. If the site under analysis is safe, we recommend disabling network traffic filtering temporarily. We strongly suggest just looking at the page and reloading it a few times to get a feeling of its performance. A lot of things cannot be detected by human eyes, but you can look for flickers and content shifts on the page. These performance issues can be good entry points to your investigation. Common bottlenecks: resources Let's start at the Network tab, where we can identify if resources are not optimised. After we reload the page, we can use the filters on the network tab to focus on image resources. Then we can see the information of these requests, including the size of the images, the time it took to load each image, and any errors that occurred. The waterfall chart is also useful. This is where you can see the timing of each image resource loading. We should look for evidence that the image resources are served from a CDN, with proper compression. We can check the resources one by one, and see if they contain Content-Encoding: gzip or Content-Encoding: br headers. If these headers are missing, we found one bottleneck that can be fixed by serving images using gzip or brotli compression while serving them. Headers on resource requests can tell other signs of errors. It can also happen that images are served from a CDN, such as fastly, but if there are fastly-io-error headers on the resources, it can mean that something is misconfigured. We also need to check the dimensions of the images. If an image is larger than the space it's being displayed in, it may be unnecessarily slowing down the page. If we find such bottlenecks, we can resize the images to match the actual dimensions of the space where they are being displayed to improve loading time. Server-side rendering can improve your SEO altogether, but it is worth checking the size of the index.html file because sometimes it can be counterproductive. It is recommended to try and keep HTML files under 100kb to keep the TTFB (Time To First Byte) metric under 1 second. If the page uses polyfills, it's worth checking what polyfills are in use. IE11 is no longer supported, and loading unnecessary polyfills for that browser slows down the page load time. Performance Insights Tab The performance Insights Tab in Chrome DevTools allows users to measure the page load of a website. This is done by running a performance analysis on the website and providing metrics on various aspects of the page load process, such as the time it takes for the page to be displayed, the time it takes for network resources to be loaded, and the time it takes for the page to be interactive. The performance analysis is run by simulating a user visiting the website and interacting with it, which allows the tool to accurately measure the performance of the page under real-world conditions. This information can then be used to identify areas of the website that may be causing slowdowns and to optimize the performance of the page. Follow the steps to run an analysis: 1. Open the Chrome Devtools 2. Select the "Performance insights" tab 3. Click on the Measure page load button The analysis provides us with a detailed waterfall representation of requests, color coded to the request types. It can help you identify requests that block/slow down the page rendering, and/or expensive function calls that block the main thread. It also provides you with information on important performance metrics, such as DCL (DOM Content Loaded), FCP (First Contentful Paint), LCP (Largest Contentful Paint) and TTI (Time To Interactive). You can also simulate network or CPU throttling, or enable the cache if your use case requires that. DCL refers to the time it takes for the initial HTML document to be parsed and for the DOM to be constructed. FCP refers to the time it takes for the page to display the first contentful element, such as an image or text. LCP is a metric that measures the loading speed of the largest element on a webpage, such as an image or a block of text. A fast LCP helps ensure that users see the page's main content as soon as possible, which can improve the overall user experience. TTI refers to the time it takes for the page to become fully interactive, meaning that all of the necessary resources have been loaded and the page is responsive to user input. Performance Tab The "start profiling and reload page" button in the Performance tab of Chrome DevTools allows users to run a performance analysis on a website and view detailed information about how the page is loading and rendering. By clicking this button, the tool will simulate a user visiting the website and interacting with it, and will then provide metrics and other information about the page load process. Follow the steps to run an analysis 1. Open the Chrome Devtools 2. Select the "Performance" tab 3. Click on the button with the "refresh" icon A very useful part of this view is the detailed information provided on the main thread. We can interact with call stacks and find functions that might run too long, blocking the main thread, and delaying the TTI (Time To Interactive) metric. Selecting a function gives all kinds of information on that function. You can see how long that function was running, and what other functions it called, and you can also directly open that function in the Sources tab. Identifying long-running, blocking functions is crucial in finding performance bottlenecks. One way to mitigate them is to move them into worker threads. --- Chrome DevTools is a powerful tool for analyzing the performance of web applications. By using the network tab, you can identify issues with resources that might slow down page load. With the Performance insights and Performance tabs, we can identify issues that may be causing the website to load slowly, and take steps to optimize the code for better performance. Whether you're a beginner or an experienced developer, Chrome DevTools is an essential tool for analyzing and improving the performance of web applications....

Jan 9, 2023

6 mins

DevToolsSEOWeb PerformanceWeb Development

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

We take accessibility quite seriously here at This Dot because we know it's important. Still, throughout my career, I've seen many projects where accessibility was brushed aside for reasons like "our users don't really use keyboard shortcuts" or "we need to ship fast; we can add accessibility later." The truth is, that "later" often means "never." And it turns out, anyone could break their hand, like I did. I broke my dominant hand and spent four weeks in a cast, effectively rendering it useless and forcing me to work left-handed. I must thus apologize for the misleading title; this post should more accurately be dubbed "second-hand" accessibility insights. The Perspective of a Developer Firstly, it's not the end of the world. I adapted quickly to my temporary disability, which was, for the most part, a minor inconvenience. I had to type with one hand, obviously slower than my usual pace, but isn't a significant part of a software engineer's work focused on thinking? Here's what I did and learned: - I moved my mouse to the left and started using it with my left hand. I adapted quickly, but the experience wasn't as smooth as using my right hand. I could perform most tasks, but I needed to be more careful and precise. - Many actions require holding a key while pressing a mouse button (e.g., visiting links from the IDE), which is hard to do with one hand. - This led me to explore trackpad options. Apart from the Apple Magic Trackpad, choices were limited. As a Windows user (I know, sorry), that wasn't an option for me. I settled for a cheap trackpad from Amazon. A lot of tasks became easier; however, the trackpad eventually malfunctioned, sending me back to the mouse. - I don't know a lot of IDE shortcuts. I realized how much I've been relying on a mouse for my work, subconsciously refusing to learn new keyboard shortcuts (I'll be returning my senior engineer license shortly). So I learned a few new ones, which is good, I guess. - Some keyboard shortcuts are hard to press with one hand. If you find yourself in a similar situation, you may need to remap some of them. - Copilot became my best friend, saving me from a lot of slow typing, although I did have to correct and rewrite many of its suggestions. The Perspective of a User As a developer, I was able to get by and figure things out to be able to work effectively. As a user, however, I got to experience the other side of the coin and really feel the accessibility (or lack thereof) on the web. Here are a few insights I gained: - A lot of websites apparently _tried_ to implement keyboard navigation, but failed miserably. For example, a big e-commerce website I tried to use to shop for the aforementioned trackpad seemed to work fine with keyboard navigation at first, but once I focused on the search field, I found myself unable to tab out from it. When you make the effort to implement keyboard navigation, please make sure it works properly and it doesn't get broken with new changes. I wholeheartedly recommend having e2e tests (e.g. with Playwright) that verify the keyboard navigation works as expected. - A few websites and web apps I tried to use were completely unusable with the keyboard and were designed to be used with a mouse only. - Some sites had elaborate keyboard navigation, with custom keyboard shortcuts for different functionality. That took some time to figure out, and I reckon it's not as intuitive as the designers thought it would be. Once a user learns the shortcuts, however, it could make their life easier, I suppose. - A lot of interactive elements are much smaller than they should be, making it hard to accurately click on them with your weaker hand. Designers, I beg you, please make your buttons bigger. I once worked on an application that had a "gloves mode" for environments where the operators would be using gloves, and I feel like maybe the size we went with for the "gloves mode" should be the standard everywhere, especially as screens get bigger and bigger. - Misclicking is easy, especially using your weaker hand. Be it a mouse click or just hitting an Enter key on accident. Kudos to all the developers who thought about this and implemented a confirmation dialog or other safety measures to prevent users from accidentally deleting or posting something. I've however encountered a few apps that didn't have any of these, and those made me a bit anxious, to be honest. If this is something you haven't thought about when developing an app, please start doing so, you might save someone a lot of trouble. Some Second-Hand Insights I was only a little bit impaired by being temporarily one-handed and it was honestly a big pain. In this post, I've focused on my anecdotal experience as a developer and a user, covering mostly keyboard navigation and mouse usage. I can only imagine how frustrating it must be for visually impaired users, or users with other disabilities, to use the web. I must confess I haven't always been treating accessibility as a priority, but I've certainly learned my lesson. I will try to make sure all the apps I work on are accessible and inclusive, and I will try to test not only the keyboard navigation, ARIA attributes, and other accessibility features, but also the overall experience of using the app with a screen reader. I hope this post will at least plant a little seed in your head that makes you think about what it feels like to be disabled and what would the experience of a disabled person be like using the app you're working on. Conclusion: The Humbling Realities of Accessibility The past few weeks have been an eye-opening journey for me into the world of accessibility, exposing its importance not just in theory but in palpable, daily experiences. My short-term impairment allowed me to peek into a life where simple tasks aren't so simple, and convenient shortcuts are a maze of complications. It has been a humbling experience, but also an illuminating one. As developers and designers, we often get caught in the rush to innovate and to ship, leaving behind essential elements that make technology inclusive and humane. While my temporary disability was an inconvenience, it's permanent for many others. A broken hand made me realize how broken our approach towards accessibility often is. The key takeaway here isn't just a list of accessibility tips; it's an earnest appeal to empathize with your end-users. "Designing for all" is not a checkbox to tick off before a product launch; it's an ongoing commitment to the understanding that everyone interacts with technology differently. When being empathetic and sincerely thinking about accessibility, you never know whose life you could be making easier. After all, disability isn't a special condition; it's a part of the human condition. And if you still think "Our users don't really use keyboard shortcuts" or "We can add accessibility later," remember that you're not just failing a compliance checklist, you're failing real people....

Dec 6, 2023

5 mins

AccessibilityA11yWeb DevelopmentHTML

How to deploy a NodeJS application using Fly.io

I was astounded when I learned just how easy it is to deploy static web applications. Services like AWS Amplify, Netlify, GitHub Pages, etc, trivialize this process, allowing developers to focus less on deployment, and more on feature development. I was equally astounded when I learned that it can be *JUST AS EASY* to deploy a web service! There are many options out there: - Render - Heroku - Platform.sh - AWS Elastic Beanstalk This guide is going to be focused on a solution that I have found to be incredibly developer-friendly platform, Fly.io. What is Fly.io? > Deploy App Servers Close to Your Users > > Run your full-stack apps (and databases!) all over the world. No ops required. Fly.io claims to be able to run full-stack apps with no ops required. That's a bold statement. While I've committed to plenty of PR's, I haven't deployed a web service in a *while*. I was feeling the itch to deploy a service to play around with some different languages in the backend, so I was 100% in the market for a developer-friendly way to get this done, with quite literally no ops hopefully required. Fly.io App Deployment Speed-run The last time I personally deployed a brand new web service was months and months ago, on a DigitalOcean droplet. My usual go-to solution for web apps are static web apps, so I'm used to deploying static assets. Fly.io has a particular portion of their documentation which immediately drew my attention: their Speedrun section. Before deciding to write this blog, I figured, I'd at least try out their service, and if I enjoyed it, I'd write about it. Holy moly was I shocked just how *easy* Fly.io made deployment. After about 15 minutes from landing on their documentation, I was able to deploy a web service, complete with GitHub Actions CI/CD. And I didn't even need to touch a server! Here is how you can do the same. I created an incredibly terse ExpressJS app using TypeScript. 1. Install flyctl: The root URL for Fly.io has a one line command you can use to install flyctl, the command line tool which handles deployment for you. For detailed instructions though, check out this page. 2. Sign up / Log in: Sign up or Log in using the appropriate command, flyctl auth signup or flyctl auth login. 3. Run flyctl launch: This will prompt you to name your application, select a region to deploy to, and then deploy your app. This generates a fly.toml config file with the deployment configurations. In those three steps, you too can launch a sample express app. CI/CD Adding CI/CD is as simple as adding a single file to the repo, along with retrieving and adding an API token to the repo. Add the following to .github/workflows/main.yml ` Then run flyctl auth token to generate and print an API token, then add it to the repo as a new secret named FLY_API_TOKEN. That is all you need to continuously deploy your NodeJS application on every commit! Conclusion Using Fly.io honestly felt like cheating. I remember being super proud of myself when I first deployed a full LAMP stack application on a VPS. I also clearly remember the pain of troubleshooting things like SSH, CertBot and LetsEncrypt, Nginx, etc. Fly.io completely trivialized the entire process. I easily see myself using this going forward for all containerized applications since the service even includes the means for auto-scaling your apps and containers!!! If you are a developer and you are not shy of the command-line, I highly recommend checking out Fly.io and spending 15 minutes of your time, just deploying a service. You'll be shocked at just how quick and easy it can be to go from 0 to CI/CD in mere moments....

Dec 7, 2021

4 mins

NodeJS

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Deploying Web Applications with DigitalOcean and Azure

Building Modern Web Applications with DigitalOcean and Azure

DigitalOcean

The $5 Droplet

App Platform

Managed Kubernetes

Azure

Azure Static Web Apps (SWA's)

API with Azure Functions

Conclusion

Matthew Pagan

You might also like

Performance Analysis with Chrome DevTools

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

How to deploy a NodeJS application using Fly.io

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

You might also like

Performance Analysis with Chrome DevTools

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

How to deploy a NodeJS application using Fly.io

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau