Как разместить приложение Blazor на Firebase

Вступление

В этой статье мы узнаем, как развернуть приложение Blazor на Firebase. Мы создадим базовое приложение-калькулятор с помощью Blazor и разместим его на Firebase. Это приложение не будет иметь серверного кода или логики веб-API. Мы будем использовать Visual Studio 2017 для сборки и публикации приложения. Мы будем использовать CLI для развертывания приложения на Firebase.

Предпосылки

Для создания приложения Blazor необходимо установить следующие предварительные условия.

• Установите .NET Core 2.1 или выше SDK отсюда
• Установите последнюю версию Visual Studio 2017 отсюда
• Установите расширение языковых служб ASP.NET Core Blazor отсюда.

Создание приложения Blazor

Мы создадим базовое приложение-калькулятор для этой демонстрации. Поскольку это базовый калькулятор, он принимает два операнда и поддерживает четыре арифметические функции - сложение, вычитание, умножение и деление.

Откройте Visual Studio и выберите Файл ›› Новый ›› Проект. После выбора проекта откроется диалоговое окно «Новый проект». Выберите .NET Core в меню Visual C # на левой панели. Затем выберите ASP.NET Core Web Application из доступных типов проектов. Введите название проекта как SampleCalculator и нажмите ОК.

После нажатия на ОК откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы можете увидеть два раскрывающихся меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.1» из этих раскрывающихся списков. Затем выберите шаблон «Blazor» и нажмите ОК.

Это создаст ваше приложение Blazor. Теперь мы создадим наш компонент калькулятора.

Создание компонента калькулятора

Для этого приложения мы будем использовать одностраничную компонентную структуру. Логика и пользовательский интерфейс будут в одном файле.

Чтобы создать наш компонент, щелкните правой кнопкой мыши папку SampleCalculator/Pages и выберите «Добавить» ›› Новый элемент. Откроется диалоговое окно «Добавить новый элемент», в котором вас попросят выбрать нужный шаблон элемента из предоставленного списка элементов. Выберите ASP.NET Core на левой панели, а затем выберите Razor View на панели шаблонов. Введите имя файла как Calculator.cshtml и нажмите «Добавить».

См. Следующий снимок экрана:

Откройте файл Calculator.cshtml и поместите в него следующий код:

@page "/calculator"

<h1>Basic Calculator Using Blazor</h1>
<hr />
<div>
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">First Number</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">Second Number</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">Result</label>
        </div>
        <div class="col-sm-4">
            <input readonly class="form-control" bind="@finalResult" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-3">
            <button onclick="@AddNumbers" class="btn btn-primary">
                Add
                (+)
            </button>
        </div>
        <div class="col-md-3">
            <button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (−)</button>
        </div>
        <div class="col-md-3">
            <button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>
        </div>
        <div class="col-md-3">
            <button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>
        </div>
    </div>
</div>

@functions {
double operand1 { get; set; }
double operand2 { get; set; }
string finalResult { get; set; }
void AddNumbers()
{
    finalResult = (operand1 + operand2).ToString();
}
void SubtractNumbers()
{
    finalResult = (operand1 - operand2).ToString();
}
void MultiplyNumbers()
{
    finalResult = (operand1 * operand2).ToString();
}
void DivideNumbers()
{
    if (operand2 != 0)
    {
        finalResult = (operand1 / operand2).ToString();
    }
    else
    {
        finalResult = "Cannot Divide by Zero";
    }
}
}

В части кода HTML мы определили два текстовых поля для чтения ввода операнда от пользователя. У нас есть текстовое поле для отображения результата арифметических операций. Мы также определили четыре кнопки, по одной для каждой арифметической операции. Событие onclick кнопок вызовет методы, обеспечивающие вывод. После того, как он выполнил соответствующую операцию с обоими операндами.

В разделе @functions мы определили два свойства для привязки к значению, введенному пользователем, и еще одно свойство для отображения результата вычисления. Для обработки наших арифметических операций мы определили четыре метода, которые будут выполнять желаемые операции с операндами и установить значение finalResult, которое затем будет привязано к полю Result в пользовательском интерфейсе.

Добавьте ссылку навигации для этого компонента в Shared/NavMenu.cshtml файл. Нажмите F5, чтобы запустить приложение, и вы увидите экран вывода, как показано на изображении ниже:

Это приложение все еще находится в среде разработки. Перед размещением на Firebase нам необходимо опубликовать его.

Публикация приложения Blazor

Щелкните проект правой кнопкой мыши и выберите "Опубликовать". См. Изображение ниже:

Вы увидите экран, похожий на показанный ниже. В левом меню выберите «Папка» и укажите путь к папке. Вы можете указать любой путь к папке, в которой хотите опубликовать свое приложение.

Нажмите "Опубликовать". Visual Studio начнет публикацию вашего приложения. Если ошибок сборки нет, ваше приложение будет успешно опубликовано в указанной вами папке.

После успешной публикации мы продолжим размещать это приложение в Firebase.

Добавление проекта в Firebase

Первым шагом к размещению любого приложения в Firebase является добавление нового проекта в консоль Firebase.

Перейдите на https://console.firebase.google.com и войдите в свою учетную запись Google. Щелкните ссылку Add Project. Откроется всплывающее окно, как показано на изображении ниже. Введите название проекта и нажмите кнопку Create project внизу.

Обратите внимание на идентификатор проекта здесь. Идентификаторы проектов Firebase уникальны во всем мире. Вы можете изменить свой идентификатор проекта при создании нового проекта. После создания проекта вы не можете изменить свой идентификатор проекта. Мы будем использовать этот идентификатор проекта в следующем разделе при инициализации нашего приложения.

Развертывание с помощью Firebase

Откройте папку, в которой вы опубликовали приложение Blazor. Здесь вы можете увидеть папку «SampleCalculator» и файл web.config. Внутри «SampleCalculator» у нас будет еще одна папка с именем «dist». Мы опубликуем содержимое из этой папки «dist».

Откройте командную строку / окно PowerShell в папке «SampleCalculator». Теперь выполните шаги, указанные ниже:

Шаг 1: войдите с помощью Firebase

Выполните следующую команду:

firebase login

Он откроет окно браузера и попросит вас войти в Firebase. Войдите, используя свою учетную запись Google. После успешного входа в систему вернитесь в свой интерфейс командной строки.

Шаг 2: инициализация приложения

Выполните следующую команду

firebase init

Эта команда инициализирует проект firebase. Вам будет задан ряд вопросов. Ответьте на них, как показано ниже:

• Вы готовы продолжить? - Нажмите Y
• Какие функции Firebase CLI вы хотите настроить для этой папки? - выберите Хостинг
• Выберите проект Firebase по умолчанию для этого каталога: - Если проект, который вы добавили в последнем разделе, отображается в списке, выберите его, иначе выберите «не настраивать проект по умолчанию».
• Что вы хотите использовать в качестве общедоступного каталога? - расстояние
• Настроить как одностраничное приложение (переписать все URL-адреса в /index.html)? - у
• Файл dist / index.html уже существует. Перезаписать? - N

Вы получите сообщение «Инициализация Firebase завершена!» сообщение.

Шаг 3: добавление проекта по умолчанию

Если вы уже выбрали проект по умолчанию на шаге 2, вы можете пропустить этот шаг.

Если вы не выбрали проект по умолчанию, вам нужно добавить его сюда вручную. Выполните следующую команду:

firebase use --add yourProjectId

В этом случае это будет

firebase use --add blazorcalc

Вы получите сообщение об успешном выполнении: «Теперь используется проект blazorcalc».

Шаг 4: развертывание в Firebase

Наконец, выполните следующую команду, чтобы развернуть приложение в Firebase.

firebase deploy

Эта команда развернет ваше приложение Blazor в Firebase и в случае успеха предоставит вам URL-адрес хостинга.

Все шаги, упомянутые выше, показаны в GIF ниже:

Демонстрация исполнения

Откройте URL-адрес хостинга. Вы можете увидеть приложение в своем браузере, как показано на рисунке ниже:

Продление статьи

Мы можем выполнить те же действия, чтобы разместить приложение Angular в Firebase.

Выполните следующую команду, чтобы создать приложение Angular для prod.

ng build --prod

Это создаст папку «dist» в корневой папке вашего приложения. Как только вы получите папку «dist», выполните те же действия, что и упомянутые выше.

Заключение

Мы узнали, как создать образец приложения-калькулятора с помощью Blazor. Мы также узнали, как развернуть это приложение в Firebase.

Вы можете найти код этого примера калькулятора на Github.

Получите мою книгу Blazor Quick Start Guide, чтобы узнать больше о Blazor.

Готовитесь к собеседованию? Прочтите мою статью Вопросы по программированию на C # для технических собеседований

Смотрите также

• BlazorGrid - компонент многоразовой сетки для Blazor
• Публикация компонента Blazor в галерее Nuget
• Развертывание приложения Blazor на IIS
• Развертывание приложения Blazor в Azure
• CRUD с использованием Blazor с MongoDB
• Одностраничное приложение с использованием серверного Blazor

Первоначально опубликовано на https://ankitsharmablogs.com/