Code Monkey home page Code Monkey logo

blazorswa's Introduction

The Urlist - Blazor Static Web App rewrite

The Urlist is an application that lets you create lists of url’s that you can share with others. Get it? A list of URL’s? The Urlist? Listen, naming things is hard and all the good domains are already taken.

The original version of this site was built in 2019 using Azure Storage, Azure Functions, Azure Front Door, and Vue. We originally decided to try a rewrite of this using modern Static Web Apps and Blazor when Twitter authentication became unreliable, trying this in Blazor because it's a new fun challenge. You can watch us live stream the effort on Fridays.

See the work in progress here 👉 https://victorious-forest-0ccd7d90f.3.azurestaticapps.net

Project planning

We're tracking our work on this GitHub project.

We take pull requests!

We'd love pull requests! Please file an issue for anything new, and communicate in advance before doing any major work. We'd rather not duplicate effort or have you work on something we can't use.

Visual Studio 2022 setup

Once you clone the project, open the solution in the latest release of Visual Studio 2022 with the Azure workload installed., and follow these steps:

  1. Right-click on the solution and select Set Startup Projects....

  2. Select Multiple startup projects and set the following actions for each project:

    • Api - Start
    • Client - Start
    • Shared - None
  3. Press F5 to launch both the client application and the Functions API app.

Visual Studio Code with Azure Static Web Apps CLI for a better development experience (Optional)

  1. Install the Azure Static Web Apps CLI and Azure Functions Core Tools CLI.

  2. Open the folder in Visual Studio Code.

  3. Delete file Client/wwwroot/appsettings.Development.json

  4. In the VS Code terminal, run the following command to start the Static Web Apps CLI, along with the Blazor WebAssembly client application and the Functions API app:

    swa start http://localhost:5000 --api-location http://localhost:7071

    The Static Web Apps CLI (swa) starts a proxy on port 4280 that will forward static site requests to the Blazor server on port 5000 and requests to the /api endpoint to the Functions server.

  5. Open a browser and navigate to the Static Web Apps CLI's address at http://localhost:4280. You'll be able to access both the client application and the Functions API app in this single address. When you navigate to the "Fetch Data" page, you'll see the data returned by the Functions API app.

  6. Enter Ctrl-C to stop the Static Web Apps CLI.

Template Structure

  • Client: The Blazor WebAssembly sample application
  • Api: A C# Azure Functions API, which the Blazor application will call
  • Shared: A C# class library with a shared data model between the Blazor and Functions application

Deploy to Azure Static Web Apps

This application can be deployed to Azure Static Web Apps, to learn how, check out our quickstart guide.

blazorswa's People

Contributors

burkeholland avatar jongalloway avatar sofeel avatar stevesandersonms avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.