{"id":16979947,"url":"https://github.com/gsans/digitalabin-workshop","last_synced_at":"2025-06-20T16:40:30.227Z","repository":{"id":78168750,"uuid":"211223036","full_name":"gsans/digitalabin-workshop","owner":"gsans","description":"Building Full Stack GraphQL Applications with AWS Amplify and Vue","archived":false,"fork":false,"pushed_at":"2019-09-27T05:09:38.000Z","size":9,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T01:11:48.051Z","etag":null,"topics":["awsamplify","awsamplifyclient","awsappsync","vue","vuejs"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gsans.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-27T02:49:43.000Z","updated_at":"2020-09-06T12:13:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4523165-a43c-4117-8fba-beb361874415","html_url":"https://github.com/gsans/digitalabin-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gsans/digitalabin-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fdigitalabin-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fdigitalabin-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fdigitalabin-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fdigitalabin-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gsans","download_url":"https://codeload.github.com/gsans/digitalabin-workshop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fdigitalabin-workshop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260980953,"owners_count":23092292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awsamplify","awsamplifyclient","awsappsync","vue","vuejs"],"created_at":"2024-10-14T01:47:46.727Z","updated_at":"2025-06-20T16:40:25.218Z","avatar_url":"https://github.com/gsans.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Building your first Fullstack Serverless App with AWS Amplify\n\nIn this workshop we'll learn how to build cloud-enabled web applications with Vue \u0026 [AWS Amplify](https://aws-amplify.github.io/).\n\n![](https://i.imgur.com/h4AaEBB.png)\n\n### Topics we'll be covering:\n\n- [Authentication](#adding-authentication)\n- [GraphQL API with AWS AppSync](#adding-a-graphql-api)\n- [Mocking and Testing](#local-mocking-and-testing)\n- [Predictions](#adding-predictions)\n- [Hosting](#hosting)\n- [Multiple Environments](#working-with-multiple-environments)\n- [Deploying via the Amplify Console](#amplify-console)\n- [Removing / Deleting Services](#removing-services)\n\n## Pre-requisites\n\n- Node: `12.11.0`. Visit [Node](https://nodejs.org/en/download/current/)\n- npm: `6.11.3`. Packaged with Node otherwise run upgrade\n\n```bash\nnpm install -g npm\n```\n\n## Getting Started - Creating the Application\n\nTo get started, we first need to create a new Vue project \u0026 change into the new directory using the [Vue CLI](https://github.com/vuejs/vue-cli).\n\nIf you already have it installed, skip to the next step. If not, either install the CLI \u0026 create the app or create a new app using:\n\n```bash\nnpm install -g @vue/cli\nvue create amplify-app\n```\n\nVue CLI\n- ? Please pick a preset: __default (babel, eslint)__\n \nNow change into the new app directory and make sure it runs\n\n```bash\ncd amplify-app\nnpm run serve\n```\n\n## Installing the CLI \u0026 Initializing a new AWS Amplify Project\n\nLet's now install the AWS Amplify API \u0026 AWS Amplify Vue library:\n\n```bash\nnpm install --save aws-amplify aws-amplify-vue\n```\n\u003e If you have issues related to EACCESS try using sudo: `sudo npm \u003ccommand\u003e`.\n\n### Installing the AWS Amplify CLI\n\nNext, we'll install the AWS Amplify CLI:\n\n```bash\nnpm install -g @aws-amplify/cli\n```\n\u003e If your installation fails. Try `npm install -g @aws-amplify/cli --unsafe-perm=true`.\n\u003e If you have issues related to fsevents with npm install. Try: `npm audit fix --force`.\n\nNow we need to configure the CLI with our credentials:\n\n```js\namplify configure\n```\n\n\u003e If you'd like to see a video walkthrough of this configuration process, click [here](https://www.youtube.com/watch?v=fWbM5DLh25U).\n\nHere we'll walk through the `amplify configure` setup. Once you've signed in to the AWS console, continue:\n- Specify the AWS Region: __eu-central-1 (Frankfurt)__\n- Specify the username of the new IAM user: __amplify-app__\n\u003e In the AWS Console, click __Next: Permissions__, __Next: Tags__, __Next: Review__, \u0026 __Create User__ to create the new IAM user. Then, return to the command line \u0026 press Enter.\n- Enter the access key of the newly created user:   \n  accessKeyId: __(\u003cYOUR_ACCESS_KEY_ID\u003e)__   \n  secretAccessKey:  __(\u003cYOUR_SECRET_ACCESS_KEY\u003e)__\n- Profile Name: __default__\n\n\u003e To view the new created IAM User go to the dashboard at [https://console.aws.amazon.com/iam/home#/users/](https://console.aws.amazon.com/iam/home#/users/). Also be sure that your region matches your selection.\n\n### Initializing A New Project\n\n```bash\namplify init\n```\n\n- Enter a name for the project: __amplify-app__\n- Enter a name for the environment: __dev__\n- Choose your default editor: __Visual Studio Code__   \n- Please choose the type of app that you're building __javascript__   \n- What javascript framework are you using __vue__   \n- Source Directory Path: __src__   \n- Distribution Directory Path: __dist__   \n- Build Command: __npm run-script build__   \n- Start Command: __npm run-script serve__\n- Do you want to use an AWS profile? __Yes__\n- Please choose the profile you want to use __default__\n\nNow, the AWS Amplify CLI has iniatilized a new project \u0026 you will see a new folder: __amplify__. The files in this folder hold your project configuration.\n\n```bash\n\u003camplify-app\u003e\n    |_ amplify\n      |_ .config\n      |_ #current-cloud-backend\n      |_ backend\n      team-provider-info.json\n```\n\n## Adding Authentication\n\nTo add authentication to our Amplify project, we can use the following command:\n\n```sh\namplify add auth\n```\n\n\u003e When prompted choose \n- Do you want to use default authentication and security configuration?: __Default configuration__\n- How do you want users to be able to sign in when using your Cognito User Pool?: __Username__\n- Do you want to configure advanced settings? __Yes, I want to make some additional changes.__\n- What attributes are required for signing up? (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to \ntoggle all, \u0026lt;i\u0026gt; to invert selection): __Email__\n- Do you want to enable any of the following capabilities? (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to toggle all, \u0026lt;i\u0026gt; to invert selection): __None__\n\n\u003e To select none just press `Enter` in the last option.\n\nNow, we'll run the push command and the cloud resources will be created in our AWS account.\n\n```bash\namplify push\n\nCurrent Environment: dev\n\n| Category | Resource name      | Operation | Provider plugin   |\n| -------- | ------------------ | --------- | ----------------- |\n| Auth     | amplifyappuuid     | Create    | awscloudformation |\n? Are you sure you want to continue? Yes\n```\n\n\nTo quickly check your newly created __Cognito User Pool__ you can run\n\n```bash\namplify status\n```\n\n\u003e To access the __AWS Cognito Console__ at any time, go to the dashboard at [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/). Also be sure that your region is set correctly.\n\n### Configuring the Vue Application\n\nNow, our resources are created \u0026 we can start using them!\n\nThe first thing we need to do is to configure our Vue application to be aware of our new AWS Amplify project. We can do this by referencing the auto-generated `aws-exports.js` file that is now in our `src` folder.\n\nTo configure the app, open __main.js__ and add the following code below the last import:\n\n```js\nimport Vue from 'vue'\nimport App from './App.vue'\nimport Amplify, * as AmplifyModules from 'aws-amplify'\nimport { AmplifyPlugin } from 'aws-amplify-vue'\nimport awsconfig from './aws-exports'\nAmplify.configure(awsconfig)\n\nVue.use(AmplifyPlugin, AmplifyModules)\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\nNow, our app is ready to start using our AWS services.\n\n### Using the Authenticator Component\n\nAWS Amplify provides UI components that you can use in your App. Let's add these components to the project\n\nIn order to use the Authenticator Component add it to __src/App.vue__:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003camplify-authenticator\u003e\u003c/amplify-authenticator\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nNow, we can run the app and see that an Authentication flow has been added in front of our App component. This flow gives users the ability to sign up \u0026 sign in.\n\n\u003e To view any users that were created, go back to the __Cognito__ dashboard at [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/). Also be sure that your region is set correctly.\n\nAlternatively we can also use\n\n```bash\namplify console auth\n```\n\n### Accessing User Data\n\nWe can access the user's info now that they are signed in by calling `currentAuthenticatedUser()` which returns a Promise.\n\n```js\n\u003cscript\u003e\nimport { Auth } from 'aws-amplify';\n\nexport default {\n  name: 'app',\n  data() {\n    return {\n      user: { },\n    }\n  },\n  methods: {\n    currentUser() {\n      Auth.currentAuthenticatedUser().then(user =\u003e {\n        this.user = user;\n        console.log(user);\n      })\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Custom authentication strategies\n\nThe `Authenticator` Component is a really easy way to get up and running with authentication, but in a real-world application we probably want more control over how our form looks \u0026 functions.\n\nLet's look at how we might create our own authentication flow.\n\nTo get started, we would probably want to create input fields that would hold user input data in the state. For instance when signing up a new user, we would probably need 2 inputs to capture the user's email \u0026 password.\n\nTo do this, we could create a form like:\n\n```html\n\u003cform v-on:submit.prevent\u003e\n  \u003cdiv\u003e\n    \u003clabel\u003eUsername: \u003c/label\u003e\n    \u003cinput v-model='form.username' class='input' /\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003clabel\u003ePassword: \u003c/label\u003e\n    \u003cinput v-model='form.password' type=\"password\" /\u003e\n  \u003c/div\u003e\n  \u003cbutton @click='signIn' class='button'\u003eSign In\u003c/button\u003e\n\u003c/form\u003e\n```\n\nWe'd also need to have a method that signed up \u0026 signed in users. We can us the Auth class to do this. The Auth class has over 30 methods including things like `signUp`, `signIn`, `confirmSignUp`, `confirmSignIn`, \u0026 `forgotPassword`. These functions return a promise so they need to be handled asynchronously.\n\n```js\n\u003cscript\u003e\nimport { Auth } from 'aws-amplify';\n\nexport default {\n  name: 'login',\n  data() {\n    return {\n      form: {\n        username: '',\n        password: ''\n      }\n    }\n  },\n  methods: {\n    signIn() {\n      const { username, password } = this.form;\n      Auth.signIn(username, password).then(user =\u003e {\n        console.log('User signed in');\n      })\n      .catch((error) =\u003e console.log(`Error: ${error}`))\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Adding a GraphQL API\n\nTo add a GraphQL API, we can use the following command:\n\n```sh\namplify add api\n```\n\nAnswer the following questions\n\n- Please select from one of the below mentioned services __GraphQL__\n- Provide API name: __RestaurantAPI__\n- Choose the default authorization type for the API __API key__\n- Enter a description for the API key: __(empty)__\n- After how many days from now the API key should expire (1-365): __180__\n- Do you want to configure advanced settings for the GraphQL API __Yes, I want to make some additional changes.__\n- Choose the additional authorization types you want to configure for the API (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to \ntoggle all, \u0026lt;i\u0026gt; to invert selection) __None__\n- Do you have an annotated GraphQL schema? __No__\n- Do you want a guided schema creation? __Yes__\n- What best describes your project: __Single object with fields (e.g., “Todo” with ID, name, description)__\n- Do you want to edit the schema now? __Yes__\n\n\u003e To select none just press `Enter`.\n\n\n\u003e When prompted, update the schema to the following:   \n\n```graphql\ntype Restaurant @model {\n  id: ID!\n  clientId: String\n  name: String!\n  description: String!\n  city: String!\n}\n```\n\n\u003e Note: Don't forget to save the changes to the schema file!\n\nNext, let's push the configuration to our account:\n\n```bash\namplify push\n```\n\n- Are you sure you want to continue? __Yes__\n- Do you want to generate code for your newly created GraphQL API __Yes__\n- Choose the code generation language target __javascript__\n- Enter the file name pattern of graphql queries, mutations and subscriptions __src/graphql/**/*.js__\n- Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions __Yes__\n- Enter maximum statement depth [increase from default if your schema is deeply nested] __2__\n\nNotice your __GraphQL endpoint__ and __API KEY__.\n\nThis step created a new AWS AppSync API. Use the command below to access the AWS AppSync dashboard. Make sure that your region is correct.\n\n```bash\namplify console api\n```\n\n- Please select from one of the below mentioned services __GraphQL__\n\n### Local mocking and testing\n\nTo mock and test the API locally, you can run the `mock` command:\n\n```sh\namplify mock api\n```\n- Choose the code generation language target: __javascript__\n- Enter the file name pattern of graphql queries, mutations and subscriptions: __src/graphql/**/*.js__\n- Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: __Y__\n- Enter maximum statement depth [increase from default if your schema is deeply nested]: __2__\n\nThis should open up the local GraphiQL editor.\n\nFrom here, we can now test the API locally.\n\n### Adding mutations from within the AWS AppSync Console\n\nIn the AWS AppSync console, on the left side click on Queries.\n\nExecute the following mutation to create a new restaurant in the API:\n\n```graphql\nmutation createRestaurant {\n  createRestaurant(input: {\n    name: \"Nobu\"\n    description: \"Great Sushi\"\n    city: \"New York\"\n  }) {\n    id name description city\n  }\n}\n```\n\nNow, let's query for the restaurant:\n\n```graphql\nquery listRestaurants {\n  listRestaurants {\n    items {\n      id\n      name\n      description\n      city\n    }\n  }\n}\n```\n\nWe can even add search / filter capabilities when querying:\n\n```graphql\nquery searchRestaurants {\n  listRestaurants(filter: {\n    city: {\n      contains: \"New York\"\n    }\n  }) {\n    items {\n      id\n      name\n      description\n      city\n    }\n  }\n}\n```\n\n### Interacting with the GraphQL API from our client application - Querying for data\n\nNow that the GraphQL API is created we can begin interacting with it!\n\nThe first thing we'll do is perform a query to fetch data from our API. \n\nTo do so, we need to define the query, execute the query, store the data in our state, then list the items in our UI.\n\n\u003e Read more about the __Amplify GraphQL Client__ [here](https://aws-amplify.github.io/docs/js/api#amplify-graphql-client).\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv v-for=\"restaurant of restaurants\" :key=\"restaurant.id\"\u003e\n    {{restaurant.name}}\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { API, graphqlOperation } from 'aws-amplify';\nimport { listRestaurants } from './graphql/queries';\n\nexport default {\n  name: 'app',\n  data() {\n    return {\n      restaurants: [],\n    }\n  },\n  created() {\n    const response = await API.graphql(graphqlOperation(listRestaurants));\n    this.restaurants = response.data.listRestaurants.items;\n  },\n}\n\u003c/script\u003e\n```\n\n## Performing mutations\n\n Now, let's look at how we can create mutations.\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cform v-on:submit.prevent\u003e\n      \u003cdiv\u003e\n        \u003clabel\u003eName: \u003c/label\u003e\n        \u003cinput v-model='form.name' class='input' /\u003e\n      \u003c/div\u003e\n      ...\n      \u003cbutton @click='createRestaurant' class='button'\u003eCreate\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { createRestaurant } from './graphql/mutations';\n\nexport default {\n  name: 'app',\n  data() {\n    return {\n      form: { },\n      clientId: null\n    }\n  },\n  created() {\n    this.clientId = uuid();\n  },\n  methods: {\n    async createRestaurant() {\n      try {\n        const { name, description, city } = this.form;\n        const restaurant = { name, description, city, clientId: this.clientId };\n        const response = await API.graphql(\n          graphqlOperation(createRestaurant, { input: restaurant })\n        );\n        this.restaurants = [...this.restaurants, response.data.createRestaurant];\n        this.form = { name: '', description: '', city: '' };\n        console.log('item created!')\n      } catch (err) {\n        console.log(err)\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### GraphQL Subscriptions\n\nNext, let's see how we can create a subscription to subscribe to changes of data in our API.\n\nTo do so, we need to listen to the subscription, \u0026 update the state whenever a new piece of data comes in through the subscription.\n\n```js\nimport { onCreateRestaurant } from './graphql/subscriptions';\n\nexport default {\n  name: 'app',\n  created() {\n    //Subscribe to changes\n    API.graphql(graphqlOperation(onCreateRestaurant))\n    .subscribe((sourceData) =\u003e {\n      const newRestaurant = sourceData.value.data.onCreateRestaurant\n      if (newRestaurant) {\n        // skip our own mutations and duplicates\n        if (newRestaurant.clientId == this.clientId) return;\n        if (this.restaurants.some(r =\u003e r.id == newRestaurant.id)) return;\n        this.restaurants = [newRestaurant, ...this.restaurants];\n      } \n    });\n  },\n}\n```\n\n## Adding Predictions\n\nTo add the predictions category to our Amplify project, we can use the following command:\n\n```sh\namplify add predictions\n```\n\n#### Identify Text, Labels and Entities\n- Please select from one of the categories below __Identify__\n- What would you like to identify? __Identify Text__\n- Provide a friendly name for your resource __identifyTextId__\n- Would you also like to identify documents? __No__\n- Who should have access? __Auth and Guest users__\n\n#### Translate Text\n- Please select from one of the categories below __Convert__\n- What would you like to convert? __Translate text into a different language__\n- Provide a friendly name for your resource __translateTextId__\n- What is the source language? __English__\n- What is the target language? __Spanish__\n- Who should have access? __Auth and Guest users__\n\n#### Generate Speech\n- Please select from one of the categories below __Convert__\n- What would you like to convert? __Generate speech audio from text__\n- Provide a friendly name for your resource __speechGeneratorId__\n- What is the source language? __British English__\n- Select a speaker __Brian - Male__\n- Who should have access? __Auth and Guest users__\n\n#### Transcribe Audio\n- Please select from one of the categories below __Convert__\n- What would you like to convert? __Transcribe text from audio__\n- Provide a friendly name for your resource __transcriptiondId__\n- What is the source language? __British English__\n- Who should have access? __Auth and Guest users__\n\n#### Interpret Text\n- Please select from one of the categories below __Interpret__\n- What would you like to interpret? __Interpret Text__\n- Provide a friendly name for your resource __interpretTextId__\n- What kind of interpretation would you like? __All__\n- Who should have access? __Auth and Guest users__\n\n\nNow, we'll run the push command and the cloud resources will be created in our AWS account.\n\n```bash\namplify push\n```\n\n### Configuring the Vue Application\n\nNow, our resources are created \u0026 we can start using them!\n\nTo configure the app, open __main.js__ and add the following code below the last import:\n\n```js\nimport Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';\nPredictions.addPluggable(new AmazonAIPredictionsProvider());\n```\n\nNow, our app is ready to start using **Predictions**.\n\n#### Translate Example\n\nThe result of `Predictions.convert(config)` will be a promise. If successful will return the translation otherwise will return the input as-is.\n\n```\nPredictions.convert({\n  translateText: {\n    source: {\n      text: \"My taylor is rich!\",\n      language: \"en\"\n    },\n    targetLanguage: \"es\"\n  }\n})\n.then(({text}) =\u003e {\n  this.translation = text;\n})\n```\n\u003e List of [supported languages](https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes) to translate from.\n\n#### Detect Language Example\n\nThe result of `Predictions.interpret(config)` call will return a promise. If successful, we will be able to pick the main language as part of the results as demonstrated in the following code snipet.\n\n```\nPredictions.interpret({\n  text: {\n    source: {\n      text: textToInterpret,\n    },\n    type: InterpretTextCategories.LANGUAGE\n  }\n})\n.then((result) =\u003e {\n  let detected = result.textInterpretation.language;\n})\n```\n\n#### Text to Speech Example\n\nThe result of `Predictions.convert(config)` call will return a promise with the resulting audio file which we can reference to play the voice using *HMTL Audio*.\n\n```\nPredictions.convert({\n  textToSpeech: {\n    source: {\n      text: textToTranslate,\n    },\n    voiceId: \"Brian\"\n  }\n})\n.then((result) =\u003e {\n  if (result.speech.url) {\n    this.audio = new Audio();\n    this.audio.src = result.speech.url;\n    this.audio.play();\n  }\n})\n```\n\n## Hosting\n\nTo deploy \u0026 host your app on AWS, we can use the `hosting` category.\n\n```sh\namplify add hosting\n```\n\n- Select the environment setup: __DEV (S3 only with HTTP)__\n- hosting bucket name __YOURBUCKETNAME__\n- index doc for the website __index.html__\n- error doc for the website __index.html__\n\nNow, everything is set up \u0026 we can publish it:\n\n```sh\namplify publish\n```\n\n## Working with multiple environments\n\nYou can create multiple environments for your application in which to create \u0026 test out new features without affecting the main environment which you are working on.\n\nWhen you create a new environment from an existing environment, you are given a copy of the entire backend application stack from the original project. When you make changes in the new environment, you are then able to test these new changes in the new environment \u0026 merge only the changes that have been made since the new environment was created back into the original environment.\n\nLet's take a look at how to create a new environment. In this new environment, we'll re-configure the GraphQL Schema to have another field for the pet owner.\n\nFirst, we'll initialize a new environment using `amplify init`:\n\n```sh\namplify init\n```\n\n- Do you want to use an existing environment? __N__\n- Enter a name for the environment: __apiupdate__\n- Do you want to use an AWS profile? __Y__\n- __amplify-workshop-user__\n\nOnce the new environment is initialized, we should be able to see some information about our environment setup by running:\n\n```sh\namplify env list\n\n| Environments |\n| ------------ |\n| dev          |\n| *apiupdate   |\n```\n\nNow we can update the GraphQL Schema in `amplify/backend/api/RestaurantAPI/schema.graphql` to the following (adding the owner field):\n\n```graphql\ntype Restaurant @model {\n  ...\n  owner: String\n}\n```\n\nNow, we can create this new stack by running `amplify push`:\n\n```sh\namplify push\n```\n\nAfter we test it out, we can now merge it into our original dev environment:\n\n```sh\namplify env checkout dev\n\namplify status\n\namplify push\n```\n\n- Do you want to update code for your updated GraphQL API? __Y__\n- Do you want to generate GraphQL statements? __Y__\n\n\n## Deploying via the Amplify Console\n\nWe have looked at deploying via the Amplify CLI hosting category, but what about if we wanted continous deployment? For this, we can use the [Amplify Console](https://aws.amazon.com/amplify/console/) to deploy the application.\n\nThe first thing we need to do is [create a new GitHub repo](https://github.com/new) for this project. Once we've created the repo, we'll copy the URL for the project to the clipboard \u0026 initialize git in our local project:\n\n```sh\ngit init\n\ngit remote add origin git@github.com:username/project-name.git\n\ngit add .\n\ngit commit -m 'initial commit'\n\ngit push origin master\n```\n\nNext we'll visit the Amplify Console in our AWS account at [https://eu-central-1.console.aws.amazon.com/amplify/home](https://eu-central-1.console.aws.amazon.com/amplify/home).\n\nHere, we'll click __Get Started__ to create a new deployment. Next, authorize Github as the repository service.\n\nNext, we'll choose the new repository \u0026 branch for the project we just created \u0026 click __Next__.\n\nIn the next screen, we'll create a new role \u0026 use this role to allow the Amplify Console to deploy these resources \u0026 click __Next__.\n\nFinally, we can click __Save and Deploy__ to deploy our application!\n\nNow, we can push updates to Master to update our application.\n\n\n## Removing Services\n\nIf at any time, or at the end of this workshop, you would like to delete a service from your project \u0026 your account, you can do this by running the `amplify remove` command:\n\n```sh\namplify remove auth\n\namplify push\n```\n\nIf you are unsure of what services you have enabled at any time, you can run the `amplify status` command:\n\n```sh\namplify status\n```\n\n`amplify status` will give you the list of resources that are currently enabled in your app.\n\n\n## Appendix\n\n### Setup your AWS Account\n\nIn order to follow this workshop you need to create and activate an Amazon Web Services account. \n\nFollow the steps [here](https://aws.amazon.com/premiumsupport/knowledge-center/create-and-activate-aws-account)\n\n### Trobleshooting\n\nMessage: The AWS Access Key Id needs a subscription for the service\n\nSolution: Make sure you are subscribed to the free plan. [Subscribe](https://portal.aws.amazon.com/billing/signup?type=resubscribe#/resubscribed)\n\n\nMessage: TypeError: fsevents is not a constructor\n\nSolution: `npm audit fix --force`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsans%2Fdigitalabin-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgsans%2Fdigitalabin-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsans%2Fdigitalabin-workshop/lists"}