{"id":22263,"date":"2021-01-12T17:30:58","date_gmt":"2021-01-12T17:30:58","guid":{"rendered":"http:\/\/amplify_your_jamstack_with_video"},"modified":"2022-09-23T09:58:58","modified_gmt":"2022-09-23T16:58:58","slug":"amplify_your_jamstack_with_video","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/amplify_your_jamstack_with_video","title":{"rendered":"Amplify Your Jamstack With Video"},"content":{"rendered":"

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps.\nHistorically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.<\/p>\n

\"Deploy<\/p>\n

Enter Cloudinary<\/a> as an effective cloud-based media-management platform, with which you can efficiently and seamlessly create, manage, and deliver satisfactory experiences to all browsers and devices, regardless of their bandwidth. Uploading media to Cloudinary is effortless, after which it dynamically transforms them on the fly, largely heading off infrastructure- and maintenance-related concerns. Furthermore, Cloudinary offers software development kits (SDKs)<\/a> for all popular programming languages.<\/p>\n

\"Cloudinary<\/p>\n

Building the Demo App<\/h2>\n

This post shows you how to build a blog, host it with Amplify, and transform its videos with Cloudinary. The code repository<\/a> is on GitHub.<\/p>\n

Creating a React App<\/h3>\n

As a prerequisite, set up an AWS account<\/a>. For reference, see the Amplify documentation<\/a> and this Amplify tutorial<\/a>.\nFollow the steps below:<\/p>\n

    \n
  1. \n

    Add Amplify to your terminal. Type:\nnpm install -g @aws-amplify\/cli<\/code><\/p>\n<\/li>\n

  2. \n

    Configure the new project. Type:\namplify configure<\/code><\/p>\n<\/li>\n

  3. \n

    Create a React app as a starting point for the project. Type:\nnpx create-react-app amplify-jamstack-cloudinary-video<\/code><\/p>\n

    This step takes a while, after which you\u2019ll see output on the Yarn commands you can run from the project directory. For more details, see this writeup on React toolchains<\/a>.<\/p>\n<\/li>\n

  4. \n

    Go to the project directory and start the React app. Type:<\/p>\n

    cd amplify-jamstack-cloudinary-video<\/code>\nyarn start<\/code><\/p>\n<\/li>\n<\/ol>\n

    Note:<\/strong>

    To see the demo running, run the local server with the command npm start<\/code>.<\/p><\/div>\n

    When the app finishes running, React displays its rotating icon.<\/p>\n

    Adding AWS Amplify<\/h3>\n

    Tip:<\/strong> If you cannot connect to the correct instance, go to the ~\/.aws<\/code> directory and verify that the credentials you entered match those listed there. For more details, see the AWS documentation on named profiles<\/a>.\nNow turn your React app into an AWS Amplify app. First, configure your AWS account with the connections required for your app. Type:\namplify init<\/code><\/p>\n

    Note:<\/strong>

    In case of no response from Amplify, type ctrl+c to ensure that you have exited your local server.<\/p><\/div>\n

    Amplify then displays the following prompts. Respond to each of them by typing Enter to select the default as shown. Below are my responses for your reference.<\/p>\n

    ? Enter a name for the project amplifyjamstackcloud\n? Enter a name for the environment dev\n? Choose your default editor: Visual Studio Code\n? Choose the type of app that you're building javascript\nPlease tell us about your project\n? What javascript framework are you using react\n? Source Directory Path:  src\n? Distribution Directory Path: build\n? Build Command:  npm run-script build\n? Start Command: npm run-script start\nUsing default provider awscloudformation\n? Do you want to use an AWS profile? Yes\n? Please choose the profile you want to use (Use arrow keys)\n\u276f default\n<\/code><\/pre>\n
    Note:<\/strong> 
    If this is your first time you set up an AWS account profile, I suggest you pick the defaults for your settings. However, if you\u2019re on another AWS-related project that uses the AWS SDK, you might have a separate profile already. Ensure that you specify the correct one.<\/p><\/div>\n
    Afterwards, AWS displays a confirmation:<\/p>\n
    Adding backend environment dev to AWS Amplify Console app: d2hxdxps86f74m<\/code><\/p>\n
    Go to AWS Amplify<\/a> and you\u2019ll see your new app amplifyjamstackcloud there, assuming that\u2019s the name you specified.<\/p>\n
    \"AWS<\/p>\n
    \"Amplify<\/p>\n
    If you don\u2019t see your app, you might be in the wrong geographical region. To double-check, pull down the drop-down menu in the upper-left corner.<\/p>\n
    \"app<\/p>\n
    Now that your app is in the cloud, click General<\/strong> in the left navigation and note these details:<\/p>\n