This Is The PERFECT Tech Stack For a SaaS Product

let's set up the perfect tech stack for a sas product we want to do as little initial work as possible and use some of the greatest solutions currently available to help us get started quickly and to scale when needed this includes using managed cloud infrastructure so we don't have to worry about servers and using ready-made ui libraries so we don't have to design everything from scratch in this video i'll break down what i think is the perfect tech stack for a sas product and i'll explain what each of the components in this tech stack does and then i'll show you how to set it up yourself completely free of charge let's get started so before we get into all the technical stuff let me just make it clear that there's a whole lot of preference associated with the choices i'll present here a part of why i find this tech stack perfect is simply down to the fact that my team and i have a lot of experience with it as i've mentioned in other videos starting a new business or a new sas is the worst occasion to learn something new so if all of this is completely new to you it might not be your perfect tech stack that said if you're thinking of creating a sas sometime in the future or you're simply curious to learn a new approach then you'll still get a ton out of this video so follow along until the end and you'll have a fully fledged end-to-end sas boilerplate setup ready to start building today let's start by breaking down what this tech stack consists of this tech stack is fully serverless this means that we don't want to care about provisioning or managing servers we use individual cloud functions to handle requests from the client and we use a managed database where we only pay for the number of read and write operations we perform so we don't pay for servers running constant uptime and we don't need to care about the environment where the server code is executed patches security updates all of that we just let our cloud provider handle it but it gets even better we're going to be building our tech stack on aws and we're going to be using a tool called pulumi to set up our infrastructure not only will we not manage servers but we can set up an entire user login system with user authentication and a graphql api to query data and we can let aws and belumi do all the heavy lifting as soon as you get familiar with these tools you can set up an entire full stack application including a secure login system in less than an hour and if you reuse some of the boilerplate code that hour turns into 10 minutes instead around until the end of this video because i have a little surprise for you so let's break down this tech stack piece by piece let's start with the back end for the database we'll be using dynamodb it's a managed database that uses a schema-less structure this basically means that we can index our entries just as we would with a classical relational database but we can still store entire documents in a single field and besides providing a key we don't have to define the entire schema including all possible attributes in advance this makes it super easy to simply get started and then extend the structure of our table as we go along in order to fetch and serve data we'll need an api i'm a huge fan of graphql so we're going to use a service called appsync which is a managed graphql layer again we don't need to run servers we're simply going to define a graphql schema and then tell appsync how to map incoming requests to the data from the database in order to securely sign into our application we're gonna use cognito handling user authentication is very complicated and i wouldn't recommend spending a second trying to set it up all on your own cognito manages all that for us and it happens to play very well with appsync out of the box and that's basically all we need to get started with the back end of course as the sas begin to grow some of this will start getting more complex but really this is all we need to get started let's take a look at the front end we're going to be building the front end in react more specifically we're going to use next js we're also going to use a ui library to give us a lot of nice looking components to start out with i'm a huge fan of chakra ui so we're gonna go with that one to wire the front end together with the back end we'll be using amplify which is a cli tool provided by aws amplify also has a hosting service that we'll use to host the app amplify is going to help us out a lot especially when authenticating users when they sign in to the app amplify also comes with some handy utilities to request data from our graphql api though i prefer the apollo client from apollo graphql to do this instead with a few lines of code we can easily set up the apollo client to perform graphql queries and still use amplify to handle user authorization and then we get to benefit from apollo's inbuilt caching and awesome tooling finally to make our lives so much easier we're gonna use a tool called pollumi to set up the infrastructure in the cloud since we're gonna be using github to store the code we're gonna set up continuous deployment using github actions oh yeah i almost forgot we're gonna write the entire stack in typescript one language everywhere so since we're gonna build this serverless and pay according to a fully cost per usage model you may be worried about the price but i can quickly say that following the way i set things up in this video will not result in certain cost of hundreds of dollars in fact the price of all of this is negligible for the first long period however i do want to say that you can get 1 000 of free aws credit to start out and in this way this will become literally free check out my other video to see how you can get this free credit all right time to dig into some code i'll show you how to set this up step by step though i'll quickly say that this is not meant to be a tutorial per se so i'm not gonna dwell on each line of code here instead i'll go through the different elements and explain how they work stick around until the end of this video though because i am gonna share a link to a repository with the final results all the boilerplate code using that repository you can set up a full stack application in 10 minutes i'm not even kidding but please don't skip ahead let me go through it first and then everything will make perfect sense when you see the code alright i'm gonna assume that you already have an aws account and you have the aws cli configured on your local machine if you haven't i've put a link in the description that'll get you started let me start by going to pollumi.com and sign up for an account i suggest simply using your github account to sign in now let's head over to projects and create a new project aws and typescript will be selected by default so we just click next we'll call this serverless aws react sas and we'll use the region euwest1 there we go and palumi will basically tell us how to get started from here so i'm gonna have everything put together in a mono repo both the back end and front end so i'll just go ahead and rename this folder backend so the index ts file is the entry point for polumi but i would like to put things into a bit more structure let's start by deleting this then we create a folder called resources and pollumi and this is where we'll start so let's start by setting up a dynamodb table for our users we'll keep a registry of users in a user pool but i like to store a table in dynamodb as well so we can add some extra information so there we go we're gonna simply export id of the table here see how incredibly easy it is to set up resources with pollumi let's go back to the index.ts file and make sure to re-export the dynamo id here so let's move on to setup appsync first we need a graphql schema so let's create a folder called schema and create a new file called schema.graphql inside this file we will have the query type and we'll have a single field called getcognetouser which will resolve a user from our table now inside the pollumi folder we create another file called appsync.ts and we set up the appsync resource just like we did with dynamodb we export the appsync id and the graphql endpoint back to index.ts and export these from here as well so they'll get included in the pollumi setup alright now we need to set up a lamp that to resolve the graphql query and for this we need to set up a few things first of all let's create a file called im.ts and set up some basic roles and policies so let's create a file called source.ts and export a function that takes an appsync id as an argument now we're going to set up a lambda function we're going to set up the data source for our appsync layer and point that to the lambda function finally we're going to create a resolver that tells appsync to use this data source when this field and graphql is included in the request there we go all wired up nicely finally we need to create a handler for the lambda function which includes the actual logic for the resolver i'm using a few helper functions here for handling dynamodb request and lamp the responses but i'll include these helpers in the repository they are very convenient alright finally let's go back to the appsync.cs file and make sure to invoke the function that takes the appsync id and sets up the data source and resolver this right here is pollu me at work i absolutely love working with their tool and really i didn't get paid to say any of this it's not a sponsored video i'm just really really into the way they've carried this out so clean and smooth all right the last thing we need to do is to set up cognito it includes an identity pool a user pool and a user pull client these three components are essential for handling user authentication and this is also where things get a little bit complex so yeah let's get to it but first let me just remind you how much it means when you give this video a like it does take quite a lot of work putting a video together like this so a simple click on that like button makes a world of difference thank you so let's continue by setting up these last three resources we'll start by defining the actual user pool here we put a lot of the configurations for our usable like the password requirements and how users can recover their account and so on and we do the same for the usable client here and we set up the identity pool we configure this to use the usable client we just defined and we need to set up another role and a policy for users that are authenticated if you're familiar with aws you probably already know what all of this means and if not it's not overly important to know the details here but we're basically telling aws which resources an authenticated user is allowed to access and again we export the user pool id the usable client id and the identity pool id from here so that's it the entire backend is now defined and all we need to do now is run the magic command pull me up which will take care of setting up all of this in the cloud let's do it [Music] should we just uh delete this one and just do it do it all over yeah yeah do it again right yeah yeah [Music] yes there it was everything is now set up and in the first try let's just quickly jump into the aws console and verify yes the table is here and the user pool and appsync with our schema awesome all set up and ready to roll like seriously isn't it cool having all this set up already and just hitting pollumi up every time you need to spin up a new project alright let's move on to the front end when pollumi finished deploying everything it spit out an output let's just save that great let's set up a new next js project with typescript let's install chakra holo aws amplify and a few other things inside the front end folder we're going to create a folder called deployment in that we're going to create a file called amplifiedconfig.ts now we're going to use amplify to connect the front end to the back end so let's just add some configuration here and we're going to be using the ids and endpoints that pollumi outputted just before so let's go to the pages folder and find the app.tsx file in here we're gonna add amplify configure to the top and we're gonna use the file we just created now let's set up amplify using the amplify cli we're gonna go amplify init we're gonna go through the steps it's asking for here for most of these we can just use the default settings now this is super cool amplify will now generate all the queries mutations and even typescript types based on the graphql schema we created for the backend in this way everything is constantly kept in sync awesome let's start building the app so we need four pages to begin with we need a sign-in page we need a sign up page and we need a confirmation page where users can apply the confirmation code that is sent by email and finally the home page which is where users will be directed once signed in so i'm lazy by nature and since we're using chakra ui let's just head over to chakratemplates.dev where they have all these amazing ready-made templates based on chakra ui this is probably a good time to give a shout out to all these amazing people right here so cool that you actually took time to build all these and to open source it for the rest of us to use for free i mean that's amazing so let's head over to authentication under forms and let's put together these pages real quick and now that we have these forms ready we're simply going to use the off module from amplify to authenticate you see how ridiculously easy that was we don't want to bother dealing with complex login flows we're just going to have amplify incognito take care of all of that so the last little tweak we're gonna have to make is to set up the apollo client with amplify so that we can use it to make graphql queries the way we do this is to use apollo link to create a custom fetch function for the apollo client to use which basically intercepts the fetch call then passes the jwt token to the graphql endpoint we set up using appsync i've included this helper function in the repository that i'll be sharing with you in a moment let's run npm run dev and see how this works alright so the page is up i'll start by signing up here now an email was sent with a confirmation code there it was and i can now sign in and there we go it works isn't it just so cool and from here we start building the actual app we can easily add more graphql fields more types set up more resolvers using pollumi and have amplify automatically generate types and yeah everything just works with a minimal of effort isn't that just amazing so there are a few things here that i skipped over a bit fast but don't worry just go to github.com simon hardberg sas template and you will find all the code i just wrote including some really convenient helpers and utilities there's also a guide to get started and if you have just a minimum experience with aws already you can get this whole stack up and running in less than an hour when i tried it after having finished it all it took me less than 10 minutes to have the app running from a clean slate i use this template myself so it's tried and tested so to speak and if you find it valuable that i'm sharing this video and the code with you please do me the honor and give this video a like and give the repository a store on github if you get stuck with anything you're welcome to hit me up on twitter the link is in the description below also paloomi has a lot of these starters on their own github repository so be sure to check that out as well again link in the description so this video was quite technical in other videos i talk more about marketing finances and generally how to run a tech business online so if you're into this topic and you want to learn how to get started yourself check out some of my other videos and subscribe to my channel so you won't miss out on upcoming videos that's all i got now go and build some incredible sass products using this template and i will see you soon for another video [Music] you

Channel: Simon Høiberg

Views: 60,758

Keywords: SaaS, Business, Tech Stack, Cloud, AWS, Pulumi, React, web development, tech stack for web app, full stack developer, software development

Id: SUjTIX0a1PM

Length: 17min 35sec (1055 seconds)

Published: Mon Jan 31 2022