From Code to Scale! Build a Static Web App in Minutes

Rate this content
Bookmark

You've built an app and you want it to scale. Do you want CI/CD, custom domains, SSL certificates, APIs, global scale of your static assets, authentication, and authorization? Let's learn how to build a static web app on Azure and go from GitHub repo to global scale in minutes.

John Papa
John Papa
31 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.

Available in Español

1. Introduction to Web Application Development

Short description:

You've built an application that connects people who need groceries with those who can provide them. After developing your app, you need to consider code management, CI/CD, APIs, routing, security, authentication, authorization, and global scalability. There are over 30 frameworks available for building web applications, which have fundamentally changed the development process. We now build client-side applications that run entirely in the browser, requiring a new kind of application to handle this shift.

Thank you everybody for having me here at JS Nation and for all the organizers for setting this up today. I want to start with a little story for you. You've built an application, you're a developer, this is what you do and your app connects people who need to get groceries with those people who can provide them. Now millions of people could use this today in the world so let's think about what you would need after you develop your app. Of course you need your code and you probably store it in a place like GitHub and you want to push it to GitHub so make sure that you have your code available and open source but then you also want CI CD. Do you have this to make sure you're testing it and building it and then pushing out new releases? What about your API's? Are you set up to have API's and serverless functions or a backend service or how is all that coordinated? And then you might make sure that you've got your routing set up right. So you've got your app, you've got your API's, do they talk to each other well? Do you need cores set up? What about a reverse proxy? Now you get into things like security? Do you have SSL certificates in a custom domain? Of course you want your own domain for your public website. How do you establish these and how about authentication? You want to make sure you know who the people are who are logging into their app to make sure that they are authenticated and of course authorization to make sure that the roles that they provide in your application are all established already. And what about global scale? You might be in Europe or Asia or the United States or South America, you could be anywhere and your users could also be anywhere. Does your application scale around the world? Wow, you just wanted to build an application right? You just had your code and well what did you build your code with? Did you use something like Angular or maybe you used react or possibly something newer like Svelte or maybe your view developer or something else entirely? There's over 30 different frameworks that you could be using today and I'm sure that's numbers even larger. So the tools today have fundamentally changed how we build web applications. No more do we have a server runtime that we have to produce our websites and we constantly make these page refreshes. Now we're building client-side based applications or static web apps that we use and the applications are built and then they run entirely in the browser. So we've moved these application responsibilities from the server entirely into the client and we need a fundamentally new kind of application to handle this.

2. Building and Deploying Static Web Apps

Short description:

Your build process creates static assets like HTML, JavaScript, and CSS. Traditional web servers can't handle the build steps, so a new kind of cloud service like Azure Static Web Apps is needed. With Azure Static Web Apps, you can build and host your web apps, handle authorization and authentication, utilize serverless technology with Azure Functions, and implement continuous integration and deployment. Behind the scenes, your code is pushed to a GitHub repo, triggering a GitHub action that builds and deploys the static content and APIs. The result is a globally deployed static web app. Let's dive into a demo where we create an application, connect it to an API, and cover authorization and authentication.

So your build process runs and that build process creates static assets, things like HTML, JavaScript, and CSS and then those assets have to be put up on a server somewhere which then light up your web application.

Traditional web servers don't handle the build steps that apps require, they just serve the code. We need a fundamentally new kind of cloud service to handle this and this is where tools like Azure Static Web Apps can really help you out.

So thank you for coming here today, my name is John Papa and I'm going to show you how you can build and deploy a static web app in just minutes. So let's talk about what static web apps are and how Azure Static Web Apps helps you get there. In this process you're going to see a couple different things, but to sum up, you're going to build and host your web apps. You want to build them and you want to host them, that's the key part. You might also want authorization and authentication, knowing who the users are and what they can do. You also may want to have APIs.

Most applications have data somewhere, so we're going to use serverless technology, in this case using Azure Functions. You also want to have CICD, continuous integration to continually build and test your apps, and continuous deployment to deploy your applications out either to production or maybe a preview URL so you don't take your production site down when you want to see what's happening.

All right, so enough talking about this, let's take a look at what's actually happening behind the scenes. Here we've got a GitHub repo. All of our code might be in it, and I just decided to say that my code is in an app folder, and my functions, my serverless technology, is in an API folder. You can put yours where you'd like, and then we push our code up to GitHub and maybe we make a pull request into a branch, and this fires off a GitHub action, a workflow file that then does our commands. What does that do? It runs npm run build, and then deploys the static content, or HTML, JavaScript, and CSS, up to a website, and if we have them, our APIs with Azure Functions, which are optional in this process. Then collectively, those two things become our static web apps application, and they get deployed globally around the world with multiple points of presence.

So that's what's happening behind the scenes. Now, it's time to actually see what's happening and try it ourselves. So let's go through a demo, but before we run into this, let's look at what we're going to do. We're going to create an application, and they're going to take that app, and we're going to connect it to an API. So we have our data with the application. And then we're going to cover authorization and authentication. So let's start where you start, though, and that's with your code on GitHub. We'll flip over to our application. So in our application here, we've got a GitHub repository which you can check out as well. Mine's called jsnationlive2020. And what I want to do is take this application, which you can see I've got Angular, React, Svelte, and Vue in here. Normally wouldn't run all four, but I'm going to choose Svelte today, because why not? This application is written in four different technologies, so you can try it yourself. And I'm going to run that app.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
Using Next.JS and Redux for Epic Noscript Web Apps
React Advanced Conference 2021React Advanced Conference 2021
21 min
Using Next.JS and Redux for Epic Noscript Web Apps
A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding!
Reusing App State in React Native with Recoil
React Advanced Conference 2021React Advanced Conference 2021
24 min
Reusing App State in React Native with Recoil
A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it.

Workshops on related topic

Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)