DEV Community

OSVALDO ALVES
OSVALDO ALVES

Posted on

Cloud App Journey - Ep. 2: Publishing My Frontend to the Cloud

๐Ÿš€ Welcome to the second episode of our Cloud App Journey series!
After learning how to authenticate with Azure services and how to publish our backend, today weโ€™ll focus on the frontend.

If youโ€™re building a Single Page Application (SPA) with frameworks like React, Angular, or Vue, youโ€™ll see that publishing your app on Azure is simpler and cheaper than you might think.

๐ŸŒ Choosing the Best Hosting Option
When publishing SPAs in Azure, you might think about using App Service (the same one we used for the backend).
But hereโ€™s the trick: SPAs donโ€™t need a full backend hosting environment.

Instead, the most efficient and cost-effective way is to use Azure Storage Static Website Hosting.

Why?
โœ”๏ธ Incredibly cheap (weโ€™re talking cents per month).
โœ”๏ธ Extremely simple to configure.
โœ”๏ธ Built-in high availability.
โœ”๏ธ Integrates seamlessly with Azure CDN, for global distribution if needed.

๐Ÿ“ฆ Step 1: Preparing Your Build
If youโ€™re using React, Angular, or another SPA framework, the first step is to build the production version of your app.

For example, in Angular:

ng build --configuration production
Enter fullscreen mode Exit fullscreen mode

In React:

npm run build
Enter fullscreen mode Exit fullscreen mode

This will generate a folder (usually called dist or build) with all the compiled static files (HTML, CSS, JS, and assets).

โ˜๏ธ Step 2: Creating a Storage Account
In Azure Portal:

Search for Storage Account.

Create a new account (standard performance is usually enough).

Go to the Static Website menu (inside the storage account).

Enable it and configure the index document (e.g., index.html) and error document (e.g., index.html as well, if youโ€™re using SPA routing).

This will generate a public URL for your website, something like:

https://<your-storage-account>.zxx.web.core.windows.net
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“‚ Step 3: Uploading Your Files
There are different ways to upload your SPA build to the storage account:

Azure Portal: upload files directly in the browser.

Azure Storage Explorer (a free Microsoft tool).

Azure CLI:

az storage blob upload-batch \
  --account-name <your-storage-account> \
  --destination '$web' \
  --source ./build
Enter fullscreen mode Exit fullscreen mode

โšก Step 4: (Optional) Adding a CDN
If your users are spread across different regions, you can easily integrate a CDN to ensure your frontend loads faster worldwide.

In the storage account:

  • Go to Front Door and CDN.
  • Create a new CDN profile.
  • Link it to your static website endpoint.

Thatโ€™s it โ€” now your SPA is globally distributed! ๐ŸŒ

๐ŸŽ‰ Wrapping Up
Publishing your frontend in Azure doesnโ€™t have to be complicated or expensive.
With just a Storage Account, you get a secure, highly available, and low-cost hosting solution for your SPAs.

๐Ÿ‘‰ In the next episode, weโ€™ll explore how to publish containerized App, front and/or backend apps.

๐Ÿ’ก Have you already tried publishing a frontend in Azure? What challenges did you face? Share your experience in the comments!

Top comments (0)