How to create a Full Stack application using React and Amazon Web Services 🔥
This is a summary of the areas you will need to be familiar with and a collection of resources to get you started.
A thread 🧵👇
This is a summary of the areas you will need to be familiar with and a collection of resources to get you started.
A thread 🧵👇
First of all - there are many different ways to compose a Tech Stack for a Full Stack application.
With that said, let's start.
Tech Stack:
🔹DynamoDB
🔹GraphQL
🔹AWS Lambda (serverless)
🔸React
🔸Static hosting in AWS S3
Tools:
🔵 AWS Amplify
🔵 Serverless
With that said, let's start.
Tech Stack:
🔹DynamoDB
🔹GraphQL
🔹AWS Lambda (serverless)
🔸React
🔸Static hosting in AWS S3
Tools:
🔵 AWS Amplify
🔵 Serverless
🔹DynamoDB (1/3)
A managed database provided by AWS.
It supports both key-value entries and documents.
That means that a field can contain a single value, such as a string or a number, but can also contain a document, i.e. a JSON-object.
A managed database provided by AWS.
It supports both key-value entries and documents.
That means that a field can contain a single value, such as a string or a number, but can also contain a document, i.e. a JSON-object.
🔹DynamoDB (2/3)
It's schemaless, so besides a key, it doesn't rely on a predefined schema.
You can think of this as a combination of relational and document-based databases such as MongoDB.
It's schemaless, so besides a key, it doesn't rely on a predefined schema.
You can think of this as a combination of relational and document-based databases such as MongoDB.
🔹DynamoDB (3/3)
It's fully managed by AWS, so you don't need a server running to host the database.
This enables extremely high flexibility when it comes to up- and down-scaling your solution.
Get started with DynamoDB on AWS website.
aws.amazon.com/dynamodb
It's fully managed by AWS, so you don't need a server running to host the database.
This enables extremely high flexibility when it comes to up- and down-scaling your solution.
Get started with DynamoDB on AWS website.
aws.amazon.com/dynamodb
🔹GraphQL (1/3)
GraphQL is a query language and an alternative to SQL and MySQL.
With GraphQL we can specify exactly what we need and the relation between the data coming from the backend, all in a single request.
graphql.org
GraphQL is a query language and an alternative to SQL and MySQL.
With GraphQL we can specify exactly what we need and the relation between the data coming from the backend, all in a single request.
graphql.org
🔹GraphQL (2/3)
AWS has a solution called AppSync which enables you to create a managed GraphqQL layer to securely access, write, and combine data from one or more data sources.
You can link a DynamoDB table as a data source directly, without having to write custom resolvers.
AWS has a solution called AppSync which enables you to create a managed GraphqQL layer to securely access, write, and combine data from one or more data sources.
You can link a DynamoDB table as a data source directly, without having to write custom resolvers.
🔹GraphQL (3/3)
AWS AppSync is again fully managed, so you don't need a server running your GraphQL API.
Additionally, you can easily configure authentication based on an API-Token or OAuth 2.
Get started with AppSync on AWS website.
aws.amazon.com/appsync
AWS AppSync is again fully managed, so you don't need a server running your GraphQL API.
Additionally, you can easily configure authentication based on an API-Token or OAuth 2.
Get started with AppSync on AWS website.
aws.amazon.com/appsync
🔹AWS Lambda (1/2)
AWS Lambda functions enable you to write the entire Back-End using individual functions that run in the Cloud.
This is an extremely powerful alternative to managing and provisioning servers for your Back-End.
AWS Lambda functions enable you to write the entire Back-End using individual functions that run in the Cloud.
This is an extremely powerful alternative to managing and provisioning servers for your Back-End.
🔹AWS Lambda (2/2)
Even though you can link a DynamoDB table as a data source directly using AppSync, you typically need a bit more custom resolver-logic.
Fortunately, you can use Lambda as a data source as well.
This allows us to write custom resolvers when needed.
Even though you can link a DynamoDB table as a data source directly using AppSync, you typically need a bit more custom resolver-logic.
Fortunately, you can use Lambda as a data source as well.
This allows us to write custom resolvers when needed.
🔸React (1/2)
React is a JavaScript library for building user interfaces.
It's especially powerful for writing Single Page Applications.
It's very little likely that you haven't heard of it already, but if not, I'll drop a link to their website here.
reactjs.org
React is a JavaScript library for building user interfaces.
It's especially powerful for writing Single Page Applications.
It's very little likely that you haven't heard of it already, but if not, I'll drop a link to their website here.
reactjs.org
🔸React (2/2)
By far the easiest way to get started with a new React App, is not use create-react-app.
It comes with a comprehensive toolchain for both developing, bundling, and shipping your React App.
reactjs.org/docs/create-a-…
By far the easiest way to get started with a new React App, is not use create-react-app.
It comes with a comprehensive toolchain for both developing, bundling, and shipping your React App.
reactjs.org/docs/create-a-…
🔸Static hosting in AWS S3 (1/2)
S3 is a storage service in AWS.
We will host our application using AWS S3.
After we have used create-react-app to build our React App, we will simply upload it to an S3 bucket where the static files can be accessed.
S3 is a storage service in AWS.
We will host our application using AWS S3.
After we have used create-react-app to build our React App, we will simply upload it to an S3 bucket where the static files can be accessed.
🔸Static hosting in AWS S3 (2/2)
AWS CloudFront is a blazing fast Content Delivery Network, and we will use this to direct traffic from our domain to the S3 Bucket.
This offers additional capabilities in regards to caching, load balancing, and more.
aws.amazon.com/cloudfront
AWS CloudFront is a blazing fast Content Delivery Network, and we will use this to direct traffic from our domain to the S3 Bucket.
This offers additional capabilities in regards to caching, load balancing, and more.
aws.amazon.com/cloudfront
🔵 AWS Amplify (1/2)
AWS Amplify is a framework that enables us to integrate a lot of the things we have covered so far.
With AWS Amplify we can quickly create a stack, add authentication, add a GraphQL API using AppSync, and host the app using S3 and CloudFront.
AWS Amplify is a framework that enables us to integrate a lot of the things we have covered so far.
With AWS Amplify we can quickly create a stack, add authentication, add a GraphQL API using AppSync, and host the app using S3 and CloudFront.
🔵 AWS Amplify (2/2)
AWS Amplify is CLI-based and will get you started with a cloud-powered app in minutes (literally).
It will make our lives SO much easier!
docs.amplify.aws
AWS Amplify is CLI-based and will get you started with a cloud-powered app in minutes (literally).
It will make our lives SO much easier!
docs.amplify.aws
🔵 Serverless (1/2)
The Serverless Framework is a tool that enables us to develop, manage, and deploy Lambda Functions with absolute ease!
It allows us to use infrastructure-as-code for the entire cloud infrastructure.
The Serverless Framework is a tool that enables us to develop, manage, and deploy Lambda Functions with absolute ease!
It allows us to use infrastructure-as-code for the entire cloud infrastructure.
🔵 Serverless (2/2)
We can set up both DynamoDB, AppSync, GraphQL Schema, and all our Lambdas in a single yml-file.
It's an incredible tool!
serverless.com
We can set up both DynamoDB, AppSync, GraphQL Schema, and all our Lambdas in a single yml-file.
It's an incredible tool!
serverless.com
Additionally, it can be of great importance to understand where to use caching effectively.
How and where to cache very much depends on the application you're building.
In this article, I cover the different options and the pros/cons for each:
sigmetic.io/blog/serverles…
How and where to cache very much depends on the application you're building.
In this article, I cover the different options and the pros/cons for each:
sigmetic.io/blog/serverles…
One of the software products that I'm running, @sigmetic, is built on this Tech Stack.
Additionally, I'm using @direflowjs to create embeddable KPI widgets, thus I call the Tech Stack of Sigmetic the "GRADS" Stack 😎
You can read more about it here.
sigmetic.io/blog/sigmetic-…
Additionally, I'm using @direflowjs to create embeddable KPI widgets, thus I call the Tech Stack of Sigmetic the "GRADS" Stack 😎
You can read more about it here.
sigmetic.io/blog/sigmetic-…
The biggest takeaway from this stack, is that it's serverless!
🔥 No need to manage servers.
🔥 Pay-per-use instead of paying for uptime.
🔥 Serverless is inherently scalable.
🔥 Reducing cost.
🔥 Energy-efficient, ultimately better for the climate.
I hope you enjoyed reading.
🔥 No need to manage servers.
🔥 Pay-per-use instead of paying for uptime.
🔥 Serverless is inherently scalable.
🔥 Reducing cost.
🔥 Energy-efficient, ultimately better for the climate.
I hope you enjoyed reading.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
