Code Monkey home page Code Monkey logo

tailwindtraders-website's Introduction

Tailwind Traders Website

Tailwind Traders Website

Build status

Repositories

For this demo reference, we built several consumer and line-of-business applications and a set of backend services. You can find all repositories in the following locations:

Deploy to Azure

With the following ARM template you can automate the creation of the resources for this website.

Deploy to Azure

When you deploy this website to Azure you can define the Backend you want to use in case you have deploy your own backend. By defaults it is configured the public Backend environment provided by Microsoft.

Note: you can change the InstrumentationKey of the Application Insight that is configured by default.

If you want to update the application to use your own backend, set apiBaseUrl parameter on the ARM template provided to the url where your aks is configured.

e.g. In order to know your AKS route you could run the following command:

az aks show -n <aks-name> -g <resource-group> --query "addonProfiles.httpApplicationRouting.config.HTTPApplicationRoutingZoneName"

And it will return your base TailwindTraders-Backend url. Note that this will work only if your Backend is configured with the addon-http-application-routing ingress class (as it's by default).

Setting up Azure Communication Services

Please follow these steps to setup the web to enable customer support chat and audio/video call flow.

Pre-Requisites:

  1. You must have Azure Communication Services resource and also the logic app setup. Please follow the instructions on Tailwind Traders Logic App to deploy the logic app.
  2. A Microsoft Teams subscription to allow teams interoperability with Azure Communication Services.

Add config variables:

Edit the following variables in the appsettings.json file.

{
  connectionString: <ACS_CONNECTION_STRING>,
  acsResource: <ACS_RESOURCE_URL>,
  logicAppUrl: <LOGIC_APP_URL>,
  email: <SUPPORT_EMAIL>,
}

Support email is the account which will receive a Flow bot message with the meeting details on Microsoft Teams.

Deploy as part of AKS (Azure Kubernetes Service)

Please follow these steps to deploy the web in the same AKS where Backend is running instead of deploying to an App Service.

Note: Website supports Devspaces deployment.

Pre-Requisites:

  1. You must have an AKS with all the Tailwind Traders Backend Up & Running. Please follow the instructions on Tailwind Traders Backend repo to deploy the backend on AKS.

  2. You can't install the web on a AKS Before installing the Backend on it. This is because some configuration steps that are done when installing the Backend are needed.

Note: This document assumes you have the backend installed on an AKS and the kubectl is configured against this cluster.

Build and push the docker image

You need to build & push the docker image for the web. You can use docker-compose for this task. You must set two environment variables before launching compose:

  • TAG: Tag to use for the generated docker image.
  • REGISTRY: Must be the login server of the ACR where Backend is installed.

Then you need to login into the ACR by typing: docker login -u <username> -p <password> <acr-login-server> where <username> and <password> are the ACR credentials.

Once logged in ACR you can build the web:

docker-compose build

And then you can push the images in ACR:

docker-compose push

Deploy the image on the cluster using Helm

To deploy the web on the AKS you can use the DeployWebAKS.ps1 script in /Deploy folder. This script have following parameters:

  • -aksName: Name of the AKS (same AKS where Backend is)
  • -resourceGroup: Resource group of the AKS
  • -acrName: ACR where image is pushed. Has to be the same ACR where Backend images are.
  • -tag: Tag to use for the Docker image of the Web
  • -valueSFile: YAML files containing the values. Defaults to gvalues.yaml. You can use the provided gvalues.yaml as-is, so don't need to specify this parameter.
  • -b2cValuesFile: YAML file with the B2C configuration values. Defaults to values.b2c.yaml. If B2C login is needed, you must fill the values in the file in order to configure it.
  • -tlsEnv: TLS environment (staging or prod) that is installed in the cluster. Refer to the Backend repo for more information.
  • -appInsightsName: Application Insights' name for monitoring purposes.

    Note The DeployWebAKS.ps1 uses, only if -appInsightsName is paseed, the application-insights CLI extension to find the application insights id. Install it with az extension add --name application-insights if you pass it.

  • -acsConnectionString: Acs connection string.
  • -acsResource: Acs endpoint.
  • -logicAppUrl: Logic app trigger url.
  • -acsEmail: Support email account which will receive a Flow bot message.

To install the web in AKS my-aks using production TLS certificates, located in resource group my-rg and using an ACR named my-acr you can type:

.\DeployWebAKS.ps1 -aksName my-aks -resourceGroup my-rg -acrName my-acr -tag latest -tlsEnv prod -acsResource <my-acs> -acsConnectionString <acs-connection-string> -acsEmail <acs-email> -logicAppUrl <logic-app-url>

How to use the customer support chat and audio/video call

To use the customer support chat/call experience click on the chat bubble on the homepage and select the type of interaction.

Homepage chat bubble

After being redirected to the call/chat page as per your selection enter your name and then click on Done once the chat/join meeting option is enabled click to join the conversation.

Enter name

Join meeting

At this moment you're in the lobby once the meeting organizer lets you in the chat/call is accessible.

Meeting

Meeting

After joining in via chat/call the user is also provided with the option to switch from chat-to-call and vice-versa.

Switch to chatSwitch to call

How to use the product search by photo

To use the product search, we need to upload a photo, the website redirects to suggested products showing 3 products or less, except if only suggest 1 product. When you have only 1 suggested product, the website redirects to detail of product.

Steps to search:

  1. In home of the website, click in the "Start smart shopping" button.

Start Smart Shopping Button

  1. Select a photo to upload and send it.
    • If website has more than 1 suggested products
      • Website redirect to suggested products.
    • If website has only a one suggested product.
      • Website redirects to details of product.

To use this search, you can use the images in:

Rechargable screwdriver sample

If you select the Electric Screwdriver should be appears 3 suggested products similar to:

Rechargeable Screwdriver Suggested Products

Multi-tool plier sample

If you select the Multi-Tool Plier should be appears 3 suggested products similar to:

Multi-Tool Plier Suggested Products

Hard hat sample

If you select the Hard Hat should be redirect to product detail, beacuse only have a 1 suggested product:

Hard Hat Suggested Product Detail

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.

tailwindtraders-website's People

Contributors

angelavl avatar anthonychu avatar cdemiguel avatar cmcheca avatar crnd avatar damovisa avatar dependabot-preview[bot] avatar dependabot[bot] avatar dsrodenas avatar eiximenis avatar ericuss avatar ignaciodenuevo avatar isaacrlevin avatar ivilches avatar jaydestro avatar jennjin avatar jldeen avatar josuejoshua avatar lbugnion avatar limotley avatar luyunmt avatar mandyshieh avatar microsoftopensource avatar msftgits avatar msftsean avatar oriolbonjoch avatar ramon-tomas-c avatar rgbrota avatar smurawski avatar spboyer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tailwindtraders-website's Issues

Levicryptotrade investment

๐ŸŒ‡๐ŸŒ†#WORKING_ALL_DAY๐Ÿฅฑ๐Ÿ˜“
Don't guarantee a brighter future....
The right option is investing or trading..
โœ… #INVESTMENT is one great option in levicryptotrade.com where you can now invest in various #currencies and #stockmarkets and other fundamental organisation/Companies.
โœ… #TRADE is another great option in levicryptotrade.com where you can now buy and sell cryptocurrency and other valuable stocks that can be transported..!
Why not sign-up and become an investor in #LEVI_CRYPTOTRADE_INVESTMENT
#MAKE_MONEY_ONLINE
$3000 each day
$20000 each week
$80000 each month.Screenshot_20210722-022426.png

HTTPS should be mandatory for any kind of authentication, demo or not

Currently the Deploy README states:

Note: Currently https is not supported. Please use http when browsing the web.

I understand this was done for demo purposes, however Azure provides HTTPS for free in its App Services and this is something we should be leveraging - even for a demo.

Added a specific ports setting to docker-compose

Right now the docker-compose.yml file doesn't have any setting for ports which means, by default, the site will run on port 80. This doesn't work very well for many dev environments.

I would suggest setting the ports specifically, and instructing people in the README to set ports: 3000:80 so the site works as intended.

Is note version correct?

Is the current version of node in the staging and prod yml in the .github/workflows dir correct?

documentation or guidence on connecting backend

When deploying the web portion the readme says:

When you deploy this website to Azure you can define the Backend you want to use in case you have deploy your own backend. By defaults it is configured the public Backend environment provided by Microsoft.

Im having an issue finding documentation or guidance on how exactly you connect the website to the backend. I have both successfully deployed just need specifics on how to connect them.

README mentions use of a non-refererenced environment variable `REPOSITORY`

In the "Build and Push the docker image" section of the README, it mentions setting the following environment variable:

REPOSITORY: Must be the login server of the ACR where Backend is installed.

However, the intended docker-compose file does not use a variable named REPOSITORY it instead uses one named REGISTRY

See: https://github.com/microsoft/TailwindTraders-Website/blob/master/Source/docker-compose.yml

Suggestion is to consolidate to one of these names and update the documentation accordingly

Dockerfile pinned to 3.1 .NET SDK causes failures to build on docker.

ARG runtimeTag=3.0
ARG image=mcr.microsoft.com/dotnet/core/aspnet
ARG sdkImage=mcr.microsoft.com/dotnet/core/sdk

unless there is a pinned SDK then 3.x should build anything.

works when i set sdk and runtime to 2.1

essentially work done between 08-31-2019 till now was done without build tests?

Microsoft (R) Build Engine version 16.3.2+e481bbf88 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.
  Restore completed in 46.06 ms for /app/Tailwind.Traders.Web.csproj.
  It was not possible to find any compatible framework version
  The specified framework 'Microsoft.NETCore.App', version '2.0.7' was not found.
    - The following frameworks were found:
        3.0.3 at [/usr/share/dotnet/shared/Microsoft.NETCore.App]
  You can resolve the problem by installing the specified framework and/or SDK.
  The .NET Core frameworks can be found at:
    - https://aka.ms/dotnet-download
/root/.nuget/packages/microsoft.aspnetcore.razor.design/2.1.2/build/netstandard2.0/Microsoft.AspNetCore.Razor.Design.CodeGeneration.targets(69,5): error : rzc discover exited with code 150. [/app/Tailwind.Traders.Web.csproj]
Build FAILED.
/root/.nuget/packages/microsoft.aspnetcore.razor.design/2.1.2/build/netstandard2.0/Microsoft.AspNetCore.Razor.Design.CodeGeneration.targets(69,5): error : rzc discover exited with code 150. [/app/Tailwind.Traders.Web.csproj]
    0 Warning(s)
    1 Error(s)
Time Elapsed 00:00:24.59
The command '/bin/sh -c dotnet build' returned a non-zero code: 1
2020/02/26 16:30:24 Container failed during run: build. No retries remaining.
failed to run step ID: build: exit status 1
Run ID: ca5 failed after 4m9s. Error: failed during run, err: exit status 1
Run failed

Deploy Web script fails with error

When running the TailwindTraders.Website/Deploy/DeployWebAKS.ps1 script, it fails with the message:

Deploying web chart
Error: unknown flag: --email

It appears that the email variable on line 148 is incorrect in the call:

--set acsConnectionString=$acsConnectionString --email=$email

It does not have a "--set" and also uses the $email variable and not the $acsEmail variable

Create Request Form to use a MS Hosted Backend

Create a Feedback form where users can request a MSFT hosted backend for demo purposes. This does not guarantee it being provided, but gives folks the ability to get one of needed reasonably.

Error when try to use the Standalone "automatic deployment"

I'm getting an error when I try to auto deploy the solution in Standalone mode. I'm getting The specified app service plan was not found. error. Here is the complete error for you to trace.
{ "telemetryId": "b3545cfb-b90a-49f9-9477-5e85dce6d6f1", "bladeInstanceId": "Blade_ea0851e6347d49e3bb5bd70df9efbe47_0_0", "galleryItemId": "Microsoft.Template", "createBlade": "DeployToAzure", "code": "InvalidTemplateDeployment", "message": "The template deployment 'Microsoft.Template' is not valid according to the validation procedure. The tracking id is '20572e19-7e91-40a1-96e1-85e527ee214b'. See inner errors for details.", "details": [ { "code": "ValidationForResourceFailed", "message": "Validation failed for a resource. Check 'Error.Details[0]' for more information.", "details": [ { "code": "ServerFarmNotFound", "message": "The specified app service plan was not found." } ] } ] }

Hard-coded email setting means app has precisely one user

If I understand correctly, this is the client for the server backend, which is (functionally) the shopping cart. Unfortunately the setting below:

https://github.com/Microsoft/TailwindTraders-Website/blob/97ee364e063e16acce35d5bf48bff341812cc57d/Deploy/deployment.json#L34

Hard-codes the client's email address on the server, which means that a single deployment has only one possible user. This goes against the idea of a shopping cart, which should allow for multiple users.

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.