Azure

Azure Static Net Apps – Including API Utilizing Azure Features

Within the earlier article, Azure Static Net Apps, we realized about Static Net Apps in Azure and realized by way of a step-by-step tutorial to create static net app in Azure. Furthermore, we’ve additionally realized about Azure Features in Azure Serverless. On this article, we’ll dive deeper into Azure Static Net Apps and study so as to add and publish API utilizing Azure Features to Azure Static Net Apps.  

Earlier than we begin with this tutorial, it’s integral that you simply Create a Static Net App following the earlier Azure Static Net Apps article. As soon as the static net app is created in Azure, you’ll be able to see the URL hyperlink as follows.  

After we open the app’s repository, the folder construction for the app and Static Net Apps Github workflow needs to be inside the folder, .github/workflows.  

Creating an API 

Now, for the static net app API, allow us to create a venture of Azure Operate. We use the Static Net Apps Visual Studio Code extension for this which creates the venture named as API on the very root of the repository.    

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and information out of your static net app)

Step 1

Press the F1 Command with the intention to open the Command Palette.  

 

Step 2 

Examine for Azure Static Net Apps: Create HTTP Operate.  

 

If in case, the choice isn’t out there, test in to Set up the Extension from the Market.   

 

Step 3 

Use the next values when prompted.  

Immediate  Worth 
Choose a language  JavaScript 
Present a operate title  Message

With this, Azure Operate venture is now generated which has the HTTP triggered operate. The construction of the venture would look much like the next.  

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── operate.json
│   │   └── index.js
│   ├── host.json
│   ├── native.settings.json
│   └── package deal.json
│
└── (folders and information out of your static net app)

Step 4 

Now, the message operate is up to date with the intention to return a message to the frontend within the api/message/index.js 

module.exports = async operate (context, req) {
    context.res.json({
        textual content: "Hey from the API"
    });
};

Step 5 

For Frameworkless construction, we replace the frontend app with the intention to name the API at /api/message and therefore to show response message.  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <hyperlink rel="stylesheet" href="https://www.c-sharpcorner.com/types.css">
    <title>Vanilla JavaScript App</title>
</head>

<physique>
    <principal>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content material from the API: <b id="title">...</b></p>
    </principal>

    <script>
    (async operate() {
        const { textual content } = await( await fetch(`/api/message`)).json();
        doc.querySelector('#title').textContent = textual content;
    }())
    </script>
</physique>

</html>

Step 6 

Now, utilizing the command line instruments of bash, we run the frontend and the API regionally. First, we set up the Azure Static Net Apps CLI and Aure Features Core Instruments V3.  

npm set up -g @azure/static-web-apps-cli 

npm set up -g azure-functions-core-tools@3 

Step 7 

As we’re working with none Frameworks like Angular, Vue and React, we don’t have to construct the app. For all different frameworks, we want instructions to construct which is carried out in particular folders.  

Step 8 

Now, we begin the app by way of the Static Net Apps CLI to run the API and frontend app collectively.  

We use the ‘begin’ command to start out the Static Net Apps CLI within the root of the repository. 

swa begin src --api-location api   

Subsequent, the app might be accessed from http://localhost:4280/ because the CLI course of has began. We will see that the API has been referred to as within the web page this displaying, “Hey from the API” as we instructed above.  

Lastly, we kind Ctrl + C with the intention to cease the CLI.  

Including the API location to Workflow 

We have to replace the repository’s GitHub Motion Workflow with the suitable location of the API folder earlier than deploying the App to Azur.  

Step 9 

We will open the workflow utilizing related hyperlink like this – .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml. 

Now, the properties of the api_location might be set to API and we save the file.  

Adjustments in Deployment 

Each software program work calls for modifications. Software program itself is an iterating and evolving course of. Right here, we commit and push our code the GitHub repository with the intention to publish any modifications to our static net app in Azure.  

Utilizing F1 key, we open the Command Palette and choose the Git: Command All command. After we get prompted for commit message, press ‘add API’ which can then commit all of the modifications we make to the repository. We will additionally choose Git: push command from the identical command palette utilizing F1 which pushes any modifications to the repository and furthermore, help for constructing and deploying the apps to set off GitHub actions for the Static Net App. Lastly, we will open the repository in GitHub and test the standing and monitor the workflow. Because the run of the workflow is accomplished, we will test our modifications in our static net app visiting it.  

Conclusion 

Thus, on this article, we realized about including API to our Azure Static Net Apps.   We went by way of a step-by-step tutorial to create the AI by way of Azure Features for the Static Net app we realized to create in earlier article Azure Static Net Apps. We up to date the app to name API for the framework much less method. Subsequent, we run our app and API collectively utilizing CLI for Static Net Apps. Lastly, we additionally realized so as to add location of the API within the workflow together with the course of to publish any modifications. 

Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button