Static web apps are web applications that are made up of static files such as HTML, CSS, and JavaScript. Unlike dynamic web apps, they don't require server-side processing or a database to generate content. This means that they are typically faster to load and easier to deploy and maintain.
Static web apps are suitable for a wide range of use cases, from simple blogs and landing pages to complex web applications. They are often built using popular frameworks like React, Vue.js, or Angular, which enable developers to create dynamic user interfaces using JavaScript.
Overall, static web apps offer a simple and efficient way to build and deploy web applications that don't require complex server-side processing, making them ideal for simple websites, prototypes, and proof of concept applications.
Azure Static Web Apps is a hosting service offered by Microsoft Azure for static web applications. It allows you to deploy and host static web apps that are built with popular frameworks like React, Angular, Vue.js, and more.
Azure Static Web Apps also includes authentication and authorization features, which enable you to secure your app and control access to specific resources. Additionally, it provides integration with Azure Functions, enabling you to build serverless APIs and microservices for your app.
In summary, Azure Static Web Apps is a simple and efficient way to deploy, host, and scale your static web applications in the cloud.
Follow the steps below to get started with deploying Static Web Apps using Azure Static Web Apps Service :
- Azure subscription
Students can apply for the Github Student Developer Pack where they can get access to exiting github content for free and not the least The Students can claim $100 dollar Azure credicts. Click here to Apply
- Step 1: Log in to Azure
Go to the Azure portal at https://portal.azure.com/ and log in with your credentials.
- Step 2: Create a new resource
Click on the "+ Create a resource" button in the top-left corner of the portal.
- Step 3: Search for Static Web App
Search for "Static Web App" in the search bar at the top of the page and select it.
- Step 4: Create a new Static Web App
Click the "Create" button to create a new Static Web App.
- Step 5: Fill out the form
Fill out the form with the following information:
- Subscription: Select your subscription.
- Resource group: Create a new or select an existing resource group.
- Name: Enter a unique name for your Static Web App.
- Region: Select a region for your app.
- Publish code: Select "Code" for the build and deployment method.
- Operating System: Select "Linux".
- SKU and size: Select the "Free" SKU.
Then, click "Review + create" at the bottom of the page.
- Step 6: Review and create
Review the information on the summary page, and if everything is correct, click the "Create" button.
- Step 7: Wait for deployment to complete
Wait for the deployment to complete. This may take a few minutes.
- Step 8: Access your Static Web App
Once the deployment is complete, go to the "Overview" page of your Static Web App. Here, you can find the URL for your app. Click on the URL to access your Static Web App.
- Step 9: Upload your code
To upload your code, click on the "Static files" tab on the left-hand side of the portal. Then, click the "Browse" button to select the folder that contains your static files. After you have selected your files, click the "Upload" button.
- Step 10: Test your app
Once your files have been uploaded, refresh your app's URL to see your static website in action.
Congratulations! You have successfully created and deployed a static web app on Azure.
-
Need to convert it into an react
-
Add an better UI
If you want to contribute to this project, follow the steps below:
- Fork the repository
- To clone the repository:
git clone https://github.com/username/staticweb-library.gitreplace username with your GitHub username and repository with the name of the repository you want to clone. Also, make sure you have the necessary permissions to push changes to the repository.
- To make changes:
git add .
git commit -m "Description of changes made"- To push changes:
git push origin master