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
Top right corner of a Github repo with the Code dropdown opened and displaying the “Open with Codespaces” option

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.

Screenshot of Github Codespaces prompt to install recommended extensions. Cursor is hovering on the Install button.
Screenshot of Github Codespaces prompt to install recommended extensions. Cursor is hovering on the Install button.

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.

Folder of structure of Vue.js Static Web App with vue-app folder highlighted. Folder structure displays .vscode, api-starter, vue-app folders and boilerplate .gitignore, Code of conduct, license, readme files.
Folder of structure of Vue.js Static Web App with vue-app folder highlighted. Folder structure displays .vscode, api-starter, vue-app folders and boilerplate .gitignore, Code of conduct, license, readme files.

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 -
Screenshot of Folder structure of .devcontainer folder in Github Codespaces. Displays the .devcontainer folder with 2 files (devcontainer.json and Dockerfile), and the library-scripts folder with 1 file (node-debian.sh)
Screenshot of Folder structure of .devcontainer folder in Github Codespaces. Displays the .devcontainer folder with 2 files (devcontainer.json and Dockerfile), and the library-scripts folder with 1 file (node-debian.sh)

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

Contains a screenshot of devcontainer.json with the forwardPorts property containing a list of ports — [ 7071, 5500, 8080]
Contains a screenshot of devcontainer.json with the forwardPorts property containing a list of ports — [ 7071, 5500, 8080]

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

Screenshot of result of F1 in Github Codespaces and searching for the words Rebuild Container. Cursor is hovering over Rebuild Container option.
Screenshot of result of F1 in Github Codespaces and searching for the words Rebuild Container. Cursor is hovering over Rebuild Container option.

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!

Screenshot of Github Codespaces — PORTS — tab. An arrow is pointing to the browser icon on port 8080 (indicating it must be clicked to open the vue app in a new tab)
Screenshot of Github Codespaces — PORTS — tab. An arrow is pointing to the browser icon on port 8080 (indicating it must be clicked to open the vue app in a new tab)

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

Screenshot of Github Codespaces Source Control tab with a sample Git Commit message “added containers for codespaces, removed angular, react, svelte apps”
Screenshot of Github Codespaces Source Control tab with a sample Git Commit message “added containers for codespaces, removed angular, react, svelte apps”

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.
Screenshot of Azure tab with an arrow pointing  to the Azure tab logo. Another Arrow pointing to the “New Function” option in Static Web Apps folder.
Screenshot of Azure tab with an arrow pointing  to the Azure tab logo. Another Arrow pointing to the “New Function” option in Static Web Apps folder.

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.
Sample of Create Static Web App (Preview) page from Azure with fields auto-filled with text already mentioned in blog post.
Sample of Create Static Web App (Preview) page from Azure with fields auto-filled with text already mentioned in blog post.

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:

Screenshot of Github Actions tab with the successful workflow run for Static Web App deployment.
Screenshot of Github Actions tab with the successful workflow run for Static Web App deployment.

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

Screenshot of Azure Portal containing our Static Web App overview page.
Screenshot of Azure Portal containing our Static Web App overview page.

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” toapi
    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
Screenshot of New Function App creation on Github Codespaces under the Azure tab. Arrow points to the “Create Function” option under the Functions folder. Cursor is hovering on HTTP trigger template in the dropdown.
Screenshot of New Function App creation on Github Codespaces under the Azure tab. Arrow points to the “Create Function” option under the Functions folder. Cursor is hovering on HTTP trigger template in the dropdown.

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.

Screenshot of Functions tab selected in the Static Web App created in the Tutorial (sample name: tutorial-static-web-app-api). Displays the 4 function apps deployed in the Static Web App (products-delete, products-get, products-post, products-put).
Screenshot of Functions tab selected in the Static Web App created in the Tutorial (sample name: tutorial-static-web-app-api). Displays the 4 function apps deployed in the Static Web App (products-delete, products-get, products-post, products-put).

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:

Picture of Github Codespace feature — Develop from anywhere, anytime
Github Codespaces + Azure Devops

Happy coding folks!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store