General

Deploying Web Applications with DigitalOcean and Azure

Matthew Pagan
6 min read
Deploying Web Applications with DigitalOcean and Azure
This article was written over 18 months ago and may contain information that is out of date. Some content may still be relevant, but please refer to official documentation 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!

DigitalOcean App Sources

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

DigitalOcean App Components

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.

Azure Create Button

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

Azure SWA Diagram

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.

About the author

Matthew Pagan

Matthew Pagan

Software Engineer

@mastapegs@mastapegs

Keep reading

You might also like

View all posts →

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

A perspective of a temporarily impaired developer on accessibility both from the perspective of a user and of a software engineer. Using the web disabled “surprisingly” makes you think about people’s experience on the web. Let us take you on that journey!...

Jan Kaiser5 mins
AccessibilityA11yWeb DevelopmentHTML

Understanding Vue's Reactive Data

A blog post that unravel how Reactivity works in Vue 3...

Jesús Padrón7 mins
VueJavaScriptTypeScriptWeb Development

Performance Analysis with Chrome DevTools

When it comes to performance, developers often use Lighthouse or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. Chrome Devtools can help you with your performance analysis....

Balázs Tápai6 mins
DevToolsSEOWeb PerformanceWeb Development

How to Style Using SCSS in Nuxt

Introduction SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable. How to Import SASS in Nuxt To add SASS after setting up your Nuxt application, we will first install SASS and sass loader. Let's run either of these commands depending on our package manager. Component File Styling With SASS and sass loader installed in our project, we can now write SCSS in our component file. Lets see an example: In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component. Global File Import and Variables To import SCSS files that are global, like variables and mixins files, we need to install style resources: Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules. Next, let's create a global variables.scss file in our assets/style folder. Add a single variable inside: Next, we need to import this file inside the nuxt.config file: Now we have the variables in our variables.scss available in all our components for use. Next, let's test it out by updating our button component. We have updated our button variant color to be our global SCSS variable ($primary and $white). Mixins Mixins in SASS are used to write styles that can be reused in other parts of the code. Let's create a sample mixin to center an item. Next, we need to import our mixin in Nuxt config: Now, let's update our button component with our mixin: Functions Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code. Let's create a function to handle a media query for our application. This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done. Let's import our mixin in Nuxt config: Let's update our button component with our function: We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner. I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....

Adesoji Temitope2 mins
Web DevelopmentNuxtJS