Serverless computing provides us with benefits such as reduced operation cost and development time. It allows us focus on our code to provide business value to the users without worrying about building and maintaining servers. AWS is one of the many providers of serverless computing services. In this post, I'll walk you through setting up your development environment to build on AWS. This will be a primer for future posts in this series.
According to wikipedia, serverless computing is a cloud-computing execution model in which the cloud provider acts as the server, dynamically managing the allocation of machine resources. What this typically means is that you can single handedly build production-ready apps by focusing on coding the business logic, and leave off the task of provisioning servers, scaling or upgrading servers, and other functionalities to cloud providers or third-party service providers. You can utilise this to build nearly any type of application or backend service, and everything required to run and scale your application with high availability is handled for you.
This model of running applications provides us benefits such as reduced operational cost, reduced development time, and many more. If you'd like to read more about what serverless is and its benefits, checkout this article on serverless architecture.
This post and more to come in the nearest future, is intended to teach you how to build React applications utilising the serverless architecture and various AWS services. We will cover areas such as authentication, creating and consuming REST APIs, analytics, and hosting. All while utilising services from a single cloud provider. We will be working with AWS Amplify, which provides CLI tools and UI component to make it easy to build serverless applications on AWS.
In this post, I'll walk you through setting up your development environment to build on AWS. This will be a primer for future posts in this series.
AWS Amplify is a library that provides you with tools to build serverless applications. With it, integrating various AWS services with your app can be done in few lines of code. You also get UI components to accelerate development. To use any AWS services or the Amplify library, you'll need an AWS account. If you don't have one, you can sign up now. Signing up gives you immediate access to the AWS free tier and there are no upfront charges.
The Amplify CLI is a tool that allows you create and configure AWS services for your application. Its purpose is to simplify mobile and web application development for you. The CLI uses AWS CloudFormation and nested stacks, which allows you to add or modify configurations locally before you push them for execution in the cloud.
You need Node.js (version 8.11 or greater) and npm (version 5 or greater) installed to use the CLI. If you don't have them installed, visit the Node.js download page. Installing node will also give you npm, but if you have just node installed, you can also download npm separately.
Install the CLI by running
npm install -g @aws-amplify/cli in the command line. Do not use yarn to install the CLI as it has known issues. Once the Amplify CLI is installed, you will have to configure it to specify the necessary AWS credentials and region. Follow the instruction below to configure the CLI.
amplify configure. This will open the AWS Console in your browser, and if you're not signed in, you'll need to sign in to your account.
Programmatic Accessaccess type selected. Click
Next: Permissionsbutton to go to the next page.
Administrator Accesspolicy and click
Create Userbutton to create the user. When the user is created, you'll be given an Access Key ID and a Secret Access Key. Keep those information because you'll need it to set up the CLI.
Now that the Amplify CLI has been configured, we can begin creating the React app. We will bootstrap the React app with Create React App. This allows us focus on writing code and not worry about setting up Babel and Webpack because they'll preconfigured for us. To create the React project, run the following command:
$ npx create-react-app serverless-react
This creates a folder
serverless-react with necessary files for a react app. Next thing to do is to initialise an Amplify project. To do this, follow the instructions below
cd serverless-reactin the command line
amplify init. This will prompt you to answer some questions.
amplify init command sets up deployment resources in the cloud with CloudFormation stacks, and prepares the project for Amplify. It pulls configuration details of the resources into the project directory. This configuration information will be used to add AWS services to the project and update service configuration. At the root of the project directory, you'll find a
.amplifyrc file and a amplify folder. They contain CloudFormation configuration information for resources we'll be using.
The final bit we need to set up the project is to add the Amplify library to our project. The library provides us with modules and UI component that makes it easy to integrate AWS services in few lines of code. Run the following command to install it from npm.
$ npm install -S aws-amplify && npm install -S aws-amplify-react
Serverless computing provides us with benefits such as reduced operation cost and development time. It allows us focus on our code to provide business value to the users without worrying about building and maintaining servers. AWS is one of the many providers of serverless computing services. It takes a couple of steps to configure and integrate these services, and AWS Amplify was built to make it easier to build serverless applications on AWS. It provides tools to create and configure services with a few commands, and library components to easily interact with those services from our code. This is the first post in a series to introduce you to building serverless applications with AWS Amplify. We set up the Amplify CLI and created an Amplify project.