{"id":3927,"date":"2023-11-04T23:13:56","date_gmt":"2023-11-04T23:13:56","guid":{"rendered":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/"},"modified":"2023-11-05T05:48:28","modified_gmt":"2023-11-05T05:48:28","slug":"building-a-serverless-web-app-with-azure-static-web-apps","status":"publish","type":"post","link":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/","title":{"rendered":"Building a serverless web app with Azure Static Web Apps"},"content":{"rendered":"<p>Serverless computing is a rapidly growing type of cloud computing that allows developers to build scalable and cost-effective applications without worrying about the underlying infrastructure. Azure Static Web Apps is a serverless solution that provides an easy way to deploy and host static web apps using Azure services.<\/p>\n<p>In this tutorial, you will learn how to build and deploy a serverless web app using Azure Static Web Apps and a simple JavaScript framework, Vue.js.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before you get started, you will need the following:<\/p>\n<ul>\n<li>An Azure account. If you don\u2019t have an Azure account, you can create one for free <a href=\"https:\/\/azure.microsoft.com\/free\/\">here<\/a>.<\/li>\n<li>Node.js and npm installed on your machine. You can download Node.js from the official website <a href=\"https:\/\/nodejs.org\/en\/download\/\">here<\/a>.<\/li>\n<li>A code editor. For this tutorial, we will be using Visual Studio Code, which you can download <a href=\"https:\/\/code.visualstudio.com\/download\">here<\/a>.<\/li>\n<li>A basic knowledge of HTML, CSS, and JavaScript.<\/li>\n<\/ul>\n<h2>Create a new Vue.js project<\/h2>\n<p>The first step is to create a new Vue.js project. If you already have a project, you can skip this step.<\/p>\n<ol>\n<li>Open a terminal window and navigate to the directory where you want to store your project.<\/li>\n<li>Run the following command to create a new Vue.js project:\n<pre><code>vue create my-app\n<\/code><\/pre>\n<p>Replace <code>my-app<\/code> with the name of your project.<\/p>\n<\/li>\n<li>\n<p>Follow the prompts in the command line to select options for your project setup. Choose the default options for this tutorial.<\/p>\n<\/li>\n<li>\n<p>Once the project is created, navigate to the project directory by running the following command:<\/p>\n<pre><code>cd my-app\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>Install dependencies<\/h2>\n<p>Now that you have created a new Vue.js project, the next step is to install the dependencies required to build a serverless web app using Azure Static Web Apps.<\/p>\n<ol>\n<li>Open a terminal window and navigate to your project directory.<\/li>\n<li>Run the following command to install the required dependencies:\n<pre><code>npm install --save-dev @azure\/static-web-apps-cli\n<\/code><\/pre>\n<p>This will install the Azure Static Web Apps CLI as a dev dependency.<\/p>\n<\/li>\n<\/ol>\n<h2>Set up a GitHub repository<\/h2>\n<p>You will need to set up a GitHub repository to connect to Azure Static Web Apps.<\/p>\n<ol>\n<li>Create a new repository on GitHub by following the instructions on the <a href=\"https:\/\/docs.github.com\/en\/github\/getting-started-with-github\/create-a-repo\">GitHub website<\/a>.<\/li>\n<li>Clone the new repository to your local machine by running the following command:\n<pre><code>git clone https:\/\/github.com\/username\/my-app.git\n<\/code><\/pre>\n<p>Replace <code>username<\/code> with your GitHub username and <code>my-app<\/code> with the name of your repository.<\/p>\n<\/li>\n<li>\n<p>Navigate to the newly cloned repository by running the following command:<\/p>\n<pre><code>cd my-app\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>Configure your Azure Static Web App<\/h2>\n<p>Once you have your GitHub repository set up, you can configure your Azure Static Web App.<\/p>\n<ol>\n<li>Open a terminal window and navigate to your project directory.<\/li>\n<li>Run the following command to log in to your Azure account:\n<pre><code>az login\n<\/code><\/pre>\n<p>Follow the prompts in the command line to authenticate with your Azure account.<\/p>\n<\/li>\n<li>\n<p>Run the following command to create a new Azure Static Web App:<\/p>\n<pre><code>az staticwebapp create --name my-app --sku Free --resource-group my-resource-group --location us-west --source . --branch main\n<\/code><\/pre>\n<p>Replace <code>my-app<\/code> with the name of your app, <code>my-resource-group<\/code> with the name of your resource group, and <code>us-west<\/code> with the Azure region you want to deploy to. You can choose any region that is available in your Azure account.<\/p>\n<\/li>\n<li>\n<p>Follow the prompts in the command line to complete the setup process. When prompted for the build command, enter:<\/p>\n<pre><code>npm run build\n<\/code><\/pre>\n<p>This will build your Vue.js app for production.<\/p>\n<\/li>\n<li>\n<p>After the setup process is complete, the command line will display the URL for your Azure Static Web App. You can now visit your app by navigating to this URL in a web browser.<\/p>\n<\/li>\n<\/ol>\n<h2>Update your Vue.js app<\/h2>\n<p>Now that your Azure Static Web App is set up, you are ready to update your Vue.js app.<\/p>\n<ol>\n<li>Open your Vue.js project in your chosen code editor.<\/li>\n<li>Navigate to the <code>src<\/code> directory and open the <code>App.vue<\/code> file.<\/li>\n<li>Replace the existing code with the following code:\n<pre><code class=\"language-html\">&lt;template&gt;\n &lt;div&gt;\n   &lt;h1&gt;{{ message }}&lt;\/h1&gt;\n &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n data() {\n   return {\n     message: 'Hello, Azure Static Web Apps!'\n   }\n }\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>This code will display a simple message on your web app.<\/p>\n<\/li>\n<li>\n<p>Save the file and return to your terminal window.<\/p>\n<\/li>\n<li>\n<p>Commit your changes by running the following command:<\/p>\n<pre><code>git add .\ngit commit -m \"Updated app message\"\ngit push\n<\/code><\/pre>\n<p>This will push your changes to your GitHub repository.<\/p>\n<\/li>\n<li>\n<p>Visit your Azure Static Web App URL to see your changes in action.<\/p>\n<\/li>\n<\/ol>\n<h2>Deploy changes automatically<\/h2>\n<p>By default, Azure Static Web Apps will deploy changes to your app automatically when you push changes to your GitHub repository.<\/p>\n<ol>\n<li>Make a small change to your Vue.js app by modifying the message in the <code>App.vue<\/code> file.<\/li>\n<li>Save the file and commit your changes by running the following command:\n<pre><code>git add .\ngit commit -m \"Updated app message\"\ngit push\n<\/code><\/pre>\n<p>This will push your changes to your GitHub repository.<\/p>\n<\/li>\n<li>\n<p>After a few seconds, refresh your Azure Static Web App URL to see the updated message.<\/p>\n<\/li>\n<\/ol>\n<p>And that\u2019s it! You have now successfully built and deployed a serverless web app with Azure Static Web Apps and Vue.js. You can continue to update your app by making changes to your Vue.js project and pushing the changes to your GitHub repository. Azure Static Web Apps will automatically deploy your changes to your app, making it easy to maintain and update your serverless web app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Serverless computing is a rapidly growing type of cloud computing that allows developers to build scalable and cost-effective applications without worrying about the underlying infrastructure. Azure Static Web Apps is a serverless solution that provides an easy way to deploy and host static web apps using Azure services. In this <a href=\"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[389,30,212,203,49,388],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building a serverless web app with Azure Static Web Apps - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a serverless web app with Azure Static Web Apps\" \/>\n<meta property=\"og:description\" content=\"Serverless computing is a rapidly growing type of cloud computing that allows developers to build scalable and cost-effective applications without worrying about the underlying infrastructure. Azure Static Web Apps is a serverless solution that provides an easy way to deploy and host static web apps using Azure services. In this Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:28+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"Building a serverless web app with Azure Static Web Apps\",\n\t            \"datePublished\": \"2023-11-04T23:13:56+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:28+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\"\n\t            },\n\t            \"wordCount\": 802,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"Azure Static Web Apps\\\"\",\n\t                \"\\\"cloud computing\\\"\",\n\t                \"\\\"Microsoft Azure\\\"\",\n\t                \"\\\"serverless architecture\\\"\",\n\t                \"\\\"Web development\\\"\",\n\t                \"[\\\"Building a serverless web app\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\",\n\t            \"name\": \"Building a serverless web app with Azure Static Web Apps - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:56+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:28+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Building a serverless web app with Azure Static Web Apps\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a serverless web app with Azure Static Web Apps - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"Building a serverless web app with Azure Static Web Apps","og_description":"Serverless computing is a rapidly growing type of cloud computing that allows developers to build scalable and cost-effective applications without worrying about the underlying infrastructure. Azure Static Web Apps is a serverless solution that provides an easy way to deploy and host static web apps using Azure services. In this Continue Reading","og_url":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:56+00:00","article_modified_time":"2023-11-05T05:48:28+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Building a serverless web app with Azure Static Web Apps","datePublished":"2023-11-04T23:13:56+00:00","dateModified":"2023-11-05T05:48:28+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/"},"wordCount":802,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Azure Static Web Apps\"","\"cloud computing\"","\"Microsoft Azure\"","\"serverless architecture\"","\"Web development\"","[\"Building a serverless web app\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/","url":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/","name":"Building a serverless web app with Azure Static Web Apps - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:56+00:00","dateModified":"2023-11-05T05:48:28+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/building-a-serverless-web-app-with-azure-static-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Building a serverless web app with Azure Static Web Apps"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3927"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3927"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3927\/revisions"}],"predecessor-version":[{"id":4623,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3927\/revisions\/4623"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3927"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}