Building a Video on Demand Web Application with Gatsby and AWS
The world of on-demand streaming has revolutionized the way we consume entertainment. With the rise of powerful services like Netflix and Amazon Prime, it’s no wonder that media companies are looking to invest in building their own video on demand web applications. In this tutorial, we’ll explore how to build a basic video on demand (VoD) web application using Gatsby.js and AWS Amplify.
Understanding AWS
To build our VoD project, we’ll be using AWS and React as our stack. AWS offers a vast variety of services, including Amplify, which provides a quick interface to help you get started with mobile and web applications quickly. With Amplify, you can easily integrate AWS services like S3, MediaConvert, and Cognito into your project.
Using Gatsby and GraphQL
While AWS is the brains of our project, we still need a way to communicate with the user. That’s where Gatsby comes in. As a pre-rendering framework built on top of React, Gatsby allows you to pre-render your React code and takes the load off your users’ clients to render your application on the device. Additionally, Gatsby has awesome support for GraphQL, an open-source language used for data query and manipulation.
Getting Started with a VoD Application
To set up our VoD application, we’ll need to create a new Gatsby project and install the necessary dependencies. We’ll also create a basic video player component using Video.js, a library that supports video streaming and playback in JavaScript environments.
Creating a Page to House the Player
Next, we’ll create a page to house our video player component. We’ll pass in the video ID as a prop to the component, which will then fetch the video from the AWS CDN and stream it for viewing.
Creating a Common List of Available Videos
To take our application to the next level, we’ll add a feature to view the videos that are uploaded to our bucket. We’ll create an API call inside the useEffect Hook to fetch the list of available videos.
Integrating AWS Amplify
Now that we have our frontend set up, it’s time to integrate AWS Amplify into our project. We’ll install the Amplify CLI and set up a new Amplify project inside our Gatsby project. We’ll then install the VOD plugin and set up a VOD resource to provision the required resources on the cloud.
Watching it in Action
Finally, we’ll test out our application by uploading a sample video via the AWS interface and testing it inside our app. We’ll also explore how to use the GraphQL API to manage our videos and create a homepage that displays all available videos.
Conclusion
In this tutorial, we’ve covered a great amount of technical content to help set up our video-on-demand application. We’ve started with a simple frontend client and added the AWS and Amplify integrations to help communicate with the backend services. This serves as a great example of how simple modern cloud services have become, and how you can quickly scaffold out any business idea that you have in mind with minimal costs and efforts.