|
1 | | -# create-svelte |
| 1 | +# Scenario : The Loved Mutt |
2 | 2 |
|
3 | | -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); |
| 3 | +According to the American Society for the Prevention of Cruelty to Animals (ASPCA), animal shelters receive about 3 million dogs annually - about 6 dogs per minute! While euthanasia rates have dropped, over 500,000 dogs are euthanized because they could not be matched with their original owners or an adoptive family. |
4 | 4 |
|
5 | | -## Creating a project |
| 5 | +Your team will aid a fictional adoption agency with deploying their website to the cloud. The application is designed to raise awareness of different dog breeds. A potential adopter can use the app to flip through pictures of various dogs and mark their favorites. Because each user will be marking various dogs as their favorites, they would like users to authenticate by using their Twitter accounts. |
6 | 6 |
|
7 | | -If you're seeing this, you've probably already done this step. Congrats! |
| 7 | +The agency has already created the website using [Svelte](https://svelte.dev/) and [Svelte Kit](https://kit.svelte.dev/) for the front end, [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview) and a [MongoDB API database](https://docs.mongodb.com/drivers/node/current/) for the back-end. They have provided documentation your team can review to gain an understanding of how it works, and run it locally for testing purposes. |
8 | 8 |
|
9 | | -```bash |
10 | | -# create a new project in the current directory |
11 | | -npm init svelte@next |
| 9 | +## Resources |
12 | 10 |
|
13 | | -# create a new project in my-app |
14 | | -npm init svelte@next my-app |
15 | | -``` |
| 11 | +A series of resources will be provided to help your team determine the appropriate steps for completion. The resources provided should provide your team with enough information to achieve each goal. If you get stuck, you can always ask a mentor for additional help. |
16 | 12 |
|
17 | | -> Note: the `@next` is temporary |
| 13 | +## Goals |
18 | 14 |
|
19 | | -## Developing |
| 15 | +Your team will deploy the application to the cloud, enable authentication, and create and configure the database. To confirm your team has completed each goal, your team will use an automated validation tool. As each goal is met the next one will be revealed. |
20 | 16 |
|
21 | | -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
| 17 | +### Goal 0: Run the application locally |
22 | 18 |
|
23 | | -```bash |
24 | | -npm run dev |
| 19 | +The adoption agency's developers have provided full documentation on how to download and configure the application to run locally. |
25 | 20 |
|
26 | | -# or start the server and open the app in a new browser tab |
27 | | -npm run dev -- --open |
28 | | -``` |
| 21 | +### Goal 1: Deploy website to Azure Static Web Apps |
29 | 22 |
|
30 | | -## Building |
| 23 | +[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) is a service which builds and deploys full stack web apps to Azure from a code repository. It provides hosting for static files (HTML, CSS, JavaScript, etc.) and server-side code through serverless Azure Functions. Azure Static Web Apps can host applications written with any front-end framework, including React, Angular, Vue.js and Svelte. Azure Functions can be used to access server resources such as databases or other APIs. A site deployed to Azure Static Web Apps automatically scales, and can even have custom domains. |
31 | 24 |
|
32 | | -Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then: |
| 25 | +Success criteria: |
33 | 26 |
|
34 | | -```bash |
35 | | -npm run build |
36 | | -``` |
| 27 | +- The shelter's site has been successfully deployed to Azure Static Web Apps |
| 28 | +- You can open the index page on the newly created Azure Static Web App |
37 | 29 |
|
38 | | -> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. |
| 30 | +Once this has been completed, you will enter the site's URL into the validation tool. |
| 31 | + |
| 32 | +#### Deployment resources |
| 33 | + |
| 34 | +Your team might find these resources helpful: |
| 35 | + |
| 36 | +- [What is Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/overview) |
| 37 | +- [Quickstart: Building your first static site - Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript#create-a-static-web-app) |
| 38 | +- [Quickstart: Create a static web app - Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript#create-a-static-web-app) |
| 39 | + |
| 40 | +### Goal 2: Enable authentication |
| 41 | + |
| 42 | +Congratulations on deploying the application to Azure Static Web Apps! The shelter staff is thrilled to see their site on the internet! |
| 43 | + |
| 44 | +The application is designed to allow potential adopters identify their favorite dog breeds, so we need a way to identify users. The shelter staff happy with either GitHub or Twitter authentication. Your team will enable authentication for the application. |
| 45 | + |
| 46 | +Success criteria: |
| 47 | + |
| 48 | +- The application is updated and redeployed to enable authentication via either GitHub or Twitter |
| 49 | +- After the updated site is deployed, a user can authenticate using the selected provider by clicking the login link, and is then presented with the buttons to mark a dog as a favorite. |
| 50 | + |
| 51 | +#### Authentication resources |
| 52 | + |
| 53 | +Your team might find these resources helpful: |
| 54 | + |
| 55 | +- [Azure Static Web Apps - Login](https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization#login) |
| 56 | +- [Access user information in Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript) |
| 57 | +- [Configure Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/configuration) |
| 58 | +- [Troubleshooting deployment and runtime errors](https://docs.microsoft.com/en-us/azure/static-web-apps/troubleshooting) |
| 59 | + |
| 60 | +### Goal 3: Create and configure a cloud-based database |
| 61 | + |
| 62 | +The shelter staff can't believe how close they are to seeing their prototype come to life! With authentication enabled, the last step is to enable a database. |
| 63 | + |
| 64 | +Because the application uses Mongo DB APIs to access the database, [Azure Cosmos DB](https://docs.microsoft.com/en-us/azure/cosmos-db/introduction) with the [API for MongoDB](https://docs.microsoft.com/en-us/azure/cosmos-db/introduction) is a great fit. With [Cosmos DB serverless](https://docs.microsoft.com/en-us/azure/cosmos-db/serverless) charges are based on usage. Your team will create a Cosmos DB account and configure the application to use your new Cosmos DB deployment. |
| 65 | + |
| 66 | +Note: The application will automatically create a database and collection to store data. Your team only needs to [create an Azure Cosmos DB account](https://docs.microsoft.com/en-us/azure/cosmos-db/create-cosmosdb-resources-portal#create-an-azure-cosmos-db-account). |
| 67 | + |
| 68 | +Success criteria: |
| 69 | + |
| 70 | +- Your team creates a Cosmos DB account |
| 71 | +- Clicking on the "Mark as favorite" button successfully saves an entry to the database and displays the next dog |
| 72 | +- The *favorites* page of the application lists the links to all dogs marked as favorites |
| 73 | + |
| 74 | +#### Database resources |
| 75 | + |
| 76 | +Your team might find these resources helpful: |
| 77 | + |
| 78 | +- [Get the MongoDB connection string by using the quick start](https://docs.microsoft.com/en-us/azure/cosmos-db/connect-mongodb-account#get-the-mongodb-connection-string-by-using-the-quick-start) |
| 79 | +- [Create an Azure Cosmos DB account](https://docs.microsoft.com/en-us/azure/cosmos-db/create-cosmosdb-resources-portal#create-an-azure-cosmos-db-account) |
| 80 | +- [Configure application settings for Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/application-settings) |
0 commit comments