Deploying a Serverless Vue.js App using GitHub Codespaces and Static Web Apps

In this tutorial we’re going to create, develop and deploy a Serverless Vue.js Web App using Github Codespaces and Azure Portal.

I wasn’t keen on getting back to Web Development because of the sheer set up for full-stack projects, separate deployments for back-end & front-end, yada yada. But combining Static Web Apps with Codespaces provides an end-to-end solution to develop and deploy web apps completely on the cloud using web browsers without any local installations. It sounds futuristic :) but it’s here! So, let’s walk through it -

To know more about Static Web Apps - Azure Static Web Apps documentation | Microsoft Docs
To know more about Github Codespaces - About Codespaces — GitHub Docs

The final code for this tutorial can be found on Github here.

We’ll divide this into 3 main parts —

1. Create and Run a Vue.js App in CodeSpaces
2. Setup Continuous Deployment for your Vue.js App using Static Web Apps on Azure
3. Add APIs as Function Apps and deploy your Serverless Vue.js App :)

Create and Run a Vue.js App in CodeSpaces

1. Create a new repository using the Static Web App template —https://github.com/MicrosoftDocs/mslearn-staticwebapp-api/generate— from Microsoft Docs.
   If you have issues creating a new repo from the template, you can just fork the repository.
2. Under Code → Open with Codespaces → +New Codespace

3. A Github Codespace provides a containerized environment with all project dependencies and runs your solution directly on the cloud. The Editor is very similar to VS Code and has everything you need to develop your application (including extensions for Eslint, Azure Function Tools, Live-Server) and Git integration.
You might get a recommendation prompt for extensions, go ahead and install them.

4. We’ll keep the vue-app & api-starter folders, and delete the react, svelte, angular folders — since we’re only deploying our Vue app.

5. To run our Vue app on Codespaces, we’ll use a container with LiveServer. We can use the Azure Static Web Apps Containers For Static Web Apps in this repo, which is compatible with Codespaces.

• Copy .devcontainer folder from this repo into your root path (contains Node Azure Functions/Javascript — everything we need to get started). You can clone the repo locally or download the files and drag them into the Github Codespace.
  Your file structure should look similar to this -

6. Add the port 8080 (Vue runs on this port by default) to the forwardPorts property in devcontainer.json

7. Press F1 in your Codespace and select the “Rebuild Container” command.

Voila! Now you have your Vue Development setup ready.

To test this you can run your app through the terminal

$ cd vue-app
$ npm install
$ npm run serve

And open the port 8080 in your browser through the Ports tab to view your Vue Web App!

Save your changes!
Go to the Source Control tab on the left, commit your changes and push them.

Setup Continuous Deployment for your Vue.js App using Static Web Apps on Azure

Now that we’ve successfully run our boilerplate Vue App on Codespaces, we’ll set up a Github Action to deploy the latest changes in the repository to our Static Web App on Azure.

You can either create a Static Web App on the Azure Portal or through Codespaces. We’ll go through the Azure Portal Static Web App creation process in detail, and similar settings apply to Codespaces.

To create a Static Web App on Codespaces

1. Navigate to the Azure tab on the left navbar (sign in as required) and use the New Function button as indicated in the screenshot to create your new Static Web App.

To create a Static Web App on Azure Portal

1. Click on Create a Resource → Search for “Static Web Apps”
2. On the Static Web App Creation page, sign in with your Github ID and populate the appropriate repository details etc.
   We can choose the Vue.js build preset,
   — Ensure “App location” is set to your Vue App Folder (/vue-app, in my case)
   — Add the “Api location” as “api”
   Note: We don’t have this folder yet but we’ll add our back-end API functions under a new “api/” folder in the next part.

3. Click on Review + Create and you’re ready to go!

You can verify your Github Action to deploy the latest changes to your Static Web App is working under the Actions tab of your repository:

Navigate to the Static Web App Url (on the overview page) to see your Vue App up and running! :)

Add APIs and deploy your Serverless Vuejs App

Now that we have the front-end app up, we’ll add the back-end API logic to dynamically update data on the site.
But first, navigate to your Codespace and run Git Pull to get the latest changes - github/workflows folder. This contains the GitHub Action to deploy the Static Web App.

1. At the root level, rename “api-starter” to “api”
   Static web apps on Azure automatically route all requests through this.
2. There are 3 function apps already in the /api folder to manipulate product data, so we’ll add one to “Get Product Data”, which is currently missing.
3. Go to the Azure tab (Crtl+Shift+A) and Navigate to Functions → Local Project. Click on Create Function and fill in:
   Template: HTTP trigger
   Function Name: products-get
   Authorization: Anonymous

4. Open the function configuration file “api/products-get/function.json”. Here, we’ll change the “methods” property to “get” only and add “route”: “products". This ensures all get requests to /products will be routed here.

5. Open products-get → index.js, where the API logic is — and replace it with the following code:
When successful, it should get the products and return them along with a 200 status code.

5. Press F5 to run your app and watch the magic happen when you browse to port 8080 (Navigate to the PORTS tab again and open 8080 in your browser).
The site is updated with the latest product data thanks to our new products-get route :)

Don’t forget to save your changes!
Go to the Source Control tab on the left, commit your changes and push them.

Once you push your changes, you can go to the Github Actions on your repository and watch the build run. The latest changes are deployed onto your Static Web App at the publicly available URL automatically.

Notice that even though we created an HTTP-Triggered Function App in our Codespace, we didn’t have to create and deploy a separate Function App on the Azure Portal — instead the Static Web App took care of it and deployed the API functions automatically. You can view the functions under the Functions tab in your Static Web App on Azure Portal.

Pretty cool, right?
Essentially this means zero setup issues on your local machine — you can develop and run your Web App+APIs through any web browser using Github Codespaces — and benefit from a single continuous deployment action from your Git repo to the cloud for both the front-end app and back-end APIs using Static Web Apps on Azure.

These are a couple of docs that were extremely helpful.
Check them out if you want to dig deeper into different solutions on Codespaces/Static Web Apps:

• Publish to Static Web Apps: Exercise — Get started — Learn | Microsoft Docs (without Codespaces integration)
• Publish an API to Azure Static Web Apps — Learn | Microsoft Docs (without Codespaces integration)
• Azure Static Web Apps are Awesome — DEV Community
• Simple (no-framework) Serverless Apps on Codespaces: How to Develop Serverless Apps with GitHub Codespaces | A Cloud Guru
• About Codespaces — GitHub Docs
• Azure Static Web Apps documentation | Microsoft Docs

Github Codespaces + Azure Devops

Happy coding folks!