How to Set Up React App with Custom Theme and Login - AWS - Serverless SaaS Build Series 2.6

do you want to know how you can set up a react app using different themes and also custom login logic in this video that is exactly what i'm going to show you how to do [Music] hi guys my name is sam with complete coding where our aim is to make you into the best aws and serverless developers that you can be in this video we're going to be looking at the first setup of our react app for our sas product we're going to be using the create react app with the chakra ui template which gives us a couple of really cool things around theming we're then going to be looking at how we can use some slightly different authentication and login logic to allow us to have separate sets of routes for users who are not logged in and users who are so let's jump into the code and see how we've set all of this up so to create the app what i've done is i've used create react app and i've used a template to basically create the app for me so in here we have the normal stuff you'd expect to get for an app i have used a type script version of a template because i like using typescript i think it makes things easier so inside here we have the source and a lot of the common files that you get so index and app so to start with we're going to be looking at app.ts as that's where most of the customization i've done has been and where all of my routing exists and that's what this video is mainly going to be about so we've got a load of default imports some of them are component imports which we'll talk about in a second but the first thing that we really do is we configure amplify so although we didn't use amplify on the back end for creating any of the api resources we are actually going to be using amplify to basically make connecting to our back end that little bit easier the way we do that is we just pass in the aws config and i have that here now this is normally what you'd get when you generate an amplify project and add your apis and add your authentication and all those kind of things instead of using amplify to set all this up i've literally just found the config object and populated the values myself manually this just is the easier way for me to do it instead of having to deal with amplify and its version of environments and all of that kind of stuff so i'm pretty happy with the way that this is and when we have different branches obviously these values will need to change but yeah code being different between branches is kind of what you expect so inside the app is where i've probably made most of the modifications to the template and what i've done is i've actually pulled the custom login logic that i did in a previous video which i will link at the top of this page and in that login video we changed the login from using the amplify with authentication to managing ourselves this includes having the logged in state assessing using the current authenticated user whether someone is logged in or not and setting the state we also have a sign out button which i've not used yet but just called auth dot sign out and changes the state now we get down to the reactive part of the app component and the template i used was the chakra ui template which comes with this thing called a chakra provider and this basically gives the whole app a theme and a couple of other nice little things and this theme you can do some really nice little things you can change the colors and templates so in here this is the theme and i just specify a primary color for light and for dark and then set the light color and the dark color to be those colors this means later in our app we can do some really cool things like switching between light and dark mode and this is the actual app and here we can see we have a light mode and then when we click the moon it becomes a dark mode and that is really simple to set up using these themes and if i wanted i could change the light color to green save this and when you go to light mode now it's a green shade so that is a really cool little tip and you can change this back to pink and that is a really cool way of doing theming now we've got past that we get to the router and i used that logged in state to have two separate versions of routing if they're not logged in we have this set of routing where if they're at a forward slash the route of the domain just send them to the home component or home view if they're at sign in put them to the sign in and in the future i'm going to add one for registering and all of the processes that need to take place there if they are logged in then we use this set of routing at the moment if they're at the root i actually redirect them straight to posts as that's where i want people to be when they first enter the app when they are logged in if they're at posts we just show them the posts view this is obviously going to get expanded loads with things like the groups with published posts with the ad post ad groups schedules and everything we looked at in last week's video where we looked at the ui so that is the component of app and all of the routing logic quickly i'll show you one of the views so let's have a look at home so in home we have a grid component which comes from this chakra ui and here there is this use color mode value this is what we use to switch between light and dark mode so what this does is if you're in light mode it uses the first value and if you're in dark mode it uses the second value this could be used for background in the case that i'm using it but it could be used for lots of other things and it could be for example it might even be like which image you want to show whether they're in light or dark mode as we go through we can see that we also have some other things for like centering things and headings and vertical stacks and horizontal stacks but those are just specific to the shaka ui but basically it comes down to there's a group of buttons and each button is a link and in this case we're just linking when you click on login to the sign in page this is all pretty simple but it's the use color mode value that is probably the really cool thing that i've taken away from this chakra ui so if we look at our app we obviously now have the color mode switching which switches not only the background but also the borders on the buttons and the colors and the font text so that is really cool and then if you click login you get to a new page in the next videos what i'm going to be doing is actually adding the connection to the back end database so that we can actually log in and receive our posts which is basically connecting our front end to our api that we've made so far in this series so if you like this video make sure to give it a like as it really helps me and the channel and helps more viewers like yourselves get to see how they can build their own sas apps and if you haven't done already make sure to subscribe which is probably over my face right now so that you get notified when the next video comes out so thank you and i'll see you in that next video

Channel: Complete Coding

Views: 324

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: g_Yv64dvu8Y

Length: 9min 23sec (563 seconds)

Published: Thu Jun 17 2021