microsoft/smarthotel360-website

SmartHotel360 Webiste

This project is retired, archived, and no longer supported. You are welcome to continue to use and fork the repository.

For the latest sample references visit: https://aka.ms/tailwindtraders & https://aka.ms/rpsls

SmartHotel360

We are happy to announce the release of SmartHotel360. This release intends to share a simplified version of SmartHotel360 reference sample apps used at Connect(); 2017 Keynotes. If you missed it, you can watch Scott Guthrie’s Keynote: Journey to the Intelligent Cloud in Channel 9.

We updated the code for this repository to support Scott Hanselman's General Session from Ignite 2018, An end-to-end tour of the Microsoft developer platform.

SmartHotel360 Repos

For this reference app scenario, we built several consumer and line-of-business apps and an Azure backend. You can find all SmartHotel360 repos in the following locations:

• SmartHotel360
• IoT
• Mixed Reality
• Backend
• Website
• Mobile
• Sentiment Analysis
• Registration

SmartHotel360 - Website

Welcome to the repository containing the website of SmartHotel360. SmartHotel360 has multiple apps that share a common backend, including a public website where hotel guests can book a room, smart conference rooms, and even verify if their pets are allowed in the hotel.

Getting Started

Once downloaded you can open the SmartHotel360.WebSite.sln file, located in the Source folder to open the solution in Visual Studio 2017 15.5 or higher. This solution contains two projects:

• The SmartHotel360.Website project: An ASP.NET Core website which is a web app developed using React+Redux and server-side rendering.

• The SmartHotel360.WebsiteFunction project: An Azure Function used to analyze photos of pets using the Cognitive Services Vision API and Azure Cosmos DB.

Note: You will need NodeJS installed and Azure CLI in order to run the solution locally.

Deploy to Azure

We will need an Azure Function (for the pet checker feature), Blob Storage (for storing the pets images), Cosmos DB (stores documents with the pet information), Vision API (to recognize the pets), SignalR Service (to manage the requests), App Service (for the website) and Application Insights (for monitoring).

We have added an Azure Resource Manager Template so you can automate the creation of these resources:

Note: Some Azure resources are needed even if you want to run the Function locally.

Once the resources are created you will need to follow a couple of manual steps:

1. Create a blob storage container called pets in the storage account and ensure it has public access.

2. Create a database in the CosmosDB called pets. Then add one collections called checks.

Running the Solution Locally

Set SmartHotel360.Website as startup project, then hit F5 to start debugging. The web is configured to use the public endpoints for the backend, so you don't need to run the backend locally.

Configuring the Website

The file appsettings.Development.json contains the settings of the website. By default, the following options are used:

• SettingsUrl: URL of the configuration endpoint. By default, it uses the public endpoint service. Change this value if you have deployed the Backend Services and want to use your own backend.
• FakeAuth: Contains data to "simulate" the login process. Data is Name (name of the user), UserId (id of the user), PicUrl (URL of the user avatar).

If FakeAuth is not set the Website will use an Azure Active Directory B2C to enable the logins.

If you want to run or deploy the Azure Function to enable the Pet Checker feature open the file appsettings.Development.json or appsettings.Production.json according to your Build configuration, Production if you are using a Release configuration or Development if you are using a Debug configuration. Then edit the PetsConfig section with the following entries:

• blobName: Storage Account Name
• blobKey: Storage Account Key
• cosmosUri: URL to Cosmos DB Document Store (eg. https://petpictureuploadmetadata.documents.azure.com:443/)
• cosmosKey: Cosmos DB Key
• api: URL to Azure Function (eg. http://petchecker.azurewebsites.net)

Configuring the Azure Function

Open the project SmartHotel360.WebsiteFunction and edit the local.settings.json file with following entries:

• AzureWebJobsStorage: Storage Account Connection String
• AzureWebJobsDashboard: Storage Account Connection String
• cosmos_uri: Cosmos DB (SQL API) URL (eg. https://petpictureuploadmetadata.documents.azure.com:443)
• cosmos_key: Cosmos DB (SQL API) Key
• constr: Cosmos DB (SQL API) Connection String
• MicrosoftVisionApiKey: Cognitive Services Vision API Key>
• MicrosoftVisionApiEndpoint:Cognitive Services Vision API URL (eg. https://southcentralus.api.cognitive.microsoft.com/vision/v1.0)
• MicrosoftVisionNumTags: Tags to fetch from Vision API. For example: 10
• AzureSignalRConnectionString: Connection String to the SignalR Service instance

Running the Website and Function locally

In order to run the Website and the Function locally you will need to setup the solution with multiple startup projects:

1. Right click on the solution and then click on properties.
2. Select the option Multiple startup projects.
3. Select option Start in the Action column.

Now, you should be able to run both the Website and the Azure Function locally and debug it. If the Azure Function is not triggered be sure that:

1. The blob container has public access.
2. The local.settings.json file contains the correct cosmos_uri, cosmos_key and constr values.
3. The website uses the correct configuration settings from SettingsUrl. It should save the pet images in a blob container called pets in your storage. It should also create documents in a collection called checks in a database pets. You can verify this using the Data Explorer. Be sure that the both database and collection exists on Cosmos DB:

Deploying to Azure

Once the resources and settings are created and configured, you can publish the website to App Service and the Function to Function App Service.

Deploying the Website to Azure

To deploy the website in Azure you can use the Publish button from Visual Studio to deploy to the Azure App Service.

If you deploy the website to an App Service and you disabled the FakeAuth to use Azure B2C be sure to go back to FakeAuth because you won't be able to use Azure B2C to login (the redirect URL of your own app service won't be in B2C).

Note: in productions scenarios we recommend you use Azure Pipelines for build and releases process.

Deploying the Function to Azure

You can use the Visual Studio 2017 Publish feature to publish the Azure Function. However the function will not be published with values of the local.settings.json file. You need to add these keys manually in the publish wizard the first time you publish.

You can also publish the Function using Core Tools with the following command:

func azure functionapp publish <YourFunctionAppName> --publish-local-settings -i

Note: You need to be logged in Azure CLI in order to run the publish command.

Enabling Azure AD B2C (Optional)

The website can use AD B2C for the login process. The external provider configured is "Live ID". If you enable AD B2C logins, you will be able to login with any Live ID Account.

The 1st step to enable AD B2C is to remove the FakeAuth section in the appsettings.Development.json. Then you can run the web and should be able to login to use AD B2C. Please do not change the port used: The web must run under https://localhost:57458, because this is the redirect URL configured in B2C.

Note: B2C forces the web to use https. Our public backend right now is not configured with a SSL certificate, we will be updating the backend endpoints to support SSL soon. At this moment is not possible run the website using B2C with http.

Azure Function & App Service Demo Scripts

There are two demos that show the power of .NET Core, Visual Studio and Azure. In order to run through the demo scripts you will need to set up your own environment.

• The first demo Azure Functions Local Debugging demonstrates the ability to easily develop and debug C# Azure Functions in Visual Studio 2017. This demo shows how the hotel only allows dogs by asking the customer to upload a picture of their pet.

• The second demo App Service Production Debugging & Application Insights shows how Application Insights is automatically configured and monitoring the health of your .NET Core apps in Azure App Service. It also shows how to debug production exceptions with the new snapshot debugging.

In order to show these demos, you need to have the services deployed to your own Azure subscription.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

smarthotel360-website's Issues

Demo Setup

I'm a MSFT FTE. I need to set this up on VMs to show migration and refactoring. Please include instructions on deploying this to VMs. Also, the instructions don't cover how to create the SQL DB (with relevant data).

deploy web.json errors out

PS C:\Users\Anthony\Source\Repos\smarthotel360\SmartHotel360-public-web\arm> .\deploy.cmd .\web sh360pw-dev
Deploying ARM template '.\web.json' in resource group sh360pw-dev
Expecting ',' delimiter: line 45 column 4 (char 1238)

Microsoft.AspNetCore.SpaServices.Extensions Version inCompatible

When i try to build this repo using .net core 2.2 sdk ,I am getting Error like this.

Detected package downgrade: Microsoft.AspNetCore.SpaServices.Extensions from 2.2.0-preview2-35157 to 2.2.0-preview1-35029. Reference the package directly from the project to select a different version..

I could not not find 2.2.0-preview2-35157 from nugut gallery

Documents are not created in Azure Cosmos DB

My configuration is correct. I cannot see the documents in a collection called checks in a database pets!

SignalR Hub Connection Error

Trying the first demo on pet detection. I can see that the document got uploaded to blob and cosmos db document. Once the vision API completes its job and output the information to SignalR nothing happening and when I looked the front-end code it throws bunch of signalR hub related errors. Any idea how to resolve this ?

Utils.js:203 [2019-07-17T20:16:28.211Z] Error: Server returned handshake error: App servers are not connected
e.log @ Utils.js:203
HubConnection.js:386 Uncaught Error: Server returned handshake error: App servers are not connected
at e.processHandshakeResponse (HubConnection.js:386)
at e.processIncomingData (HubConnection.js:322)
at e.connection.onreceive (HubConnection.js:65)
at WebSocket.u.onmessage (WebSocketTransport.js:107)
Server returned handshake error: App servers are not connected
Utils.js:203 [2019-07-17T20:16:28.212Z] Error: Connection disconnected with error 'Error: Server returned handshake error: App servers are not connected'.

Link to Scott Hanselman's General Session from Ignite 2018 results in 404

The link to Scott Hanselman's General Session from Ignite 2018 no longer works, resulting in a 404.

Images are not stored in a blob container

@bradygmsft When I run Azure function locally, the images should store in a blob container and create documents in CosmosDB according to the guide. Instead it isn't creating one. Can you help me out here?

No unit tests?

As long as this is a reference project, it would be interesting to see how testing infrastructure is set up (backend and frontend).

Pet checking is not working - pet image not uploaded

I am running both web site and function locally. They started fine and I can find hotels. However, when trying the pet check, the image uploading is not working - nothing happens after the pet image is selected.
I have node.js V8.9.4 installed on my Surface Book with VS 2017 V15.9.10 installed.
I followed the demo script for the steps.
Appreciate any help. Below is my appsetting.development.json file (replaced letters):
"PetsConfig": {
"blobName": "myblobxxxforsmarthotel",
"blobKey": "abcdefgnnnnnn==",
"cosmosUri": "https://mytestxxxsmarthotelcosmo.documents.azure.com:443/",
"cosmosKey": "abceefgxxxxx==",
"api": "http://petchecker.azurewebsites.net"
},

Build errors

Got the warnings below:

npm WARN engine [email protected]: wanted: {"node":">=4.3.0 < 5.0.0 || >= 5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || >=5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN deprecated @types/[email protected]: This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!
npm WARN engine [email protected]: wanted: {"node":">= 4.3 < 5.0.0 || >= 5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || >=5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN engine [email protected]: wanted: {"node":">= 4.3 < 5.0.0 || >= 5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || >=5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
npm WARN install Couldn't install optional dependency: Unsupported
npm WARN prefer global [email protected] should be installed with -g

Not sure if related to error I get when I build solution:

Severity Code Description Project File Line Suppression State
Error Missing binding C:\Git\Source\Repos\SmartHotel360-public-web\SmartHotel360.PublicWeb\node_modules\node-sass\vendor\win32-x64-57\binding.node SmartHotel360.PublicWeb C:\Git\Source\Repos\SmartHotel360-public-web\SmartHotel360.PublicWeb\Module build failed 1

public endpoints not reachable

It seems the default public endpoints in the appsetting.json is not reachable .
sh360services-public.eastus2.cloudapp.azure.com

Can't be reached..

Debugging on linux docker container

I'd like to debug the project on a linux docker container with Visual Studio. Unfortunately using docker-compose as the StartUp project isn't working. The Docker extension for Visual Studio builds the smarthotel360.publicweb:dev image with target base, without node for example. As the workaround I changed the docker file accordingly (merged "withnode" target with "base") but then I started having problems with sass, because of OS inconsistency (windows vs linux) and node.js version (9.x vs 6.x)

Any advice how to amend the dockerfile and docker-compose to be able to debug the project on a linux container?

Build error in vs for mac

when build smarthotel360 web in vs for mac , hint error : Error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 1.

SmartHotel360web/SmartHotel360.PublicWeb/EXEC: Error: Cannot find module 'SmartHotel360web/SmartHotel360.PublicWeb/node_modules/webpack/bin/webpack.js' (SmartHotel360.PublicWeb)

docker and nodejs all installed and docker is running

HttpRequestException