 I am Jason and I work as an engineer at Hasura. So this talk is about how you can use Hasura, about the features that Hasura has and how we can use it to very easily develop and deploy applications. Not just React app actually. So I'm not going to talk specifically about it. So it's going to be for Hasura. Hasura is basically a developer that helps you build and deploy applications really fast. And it's built on open source components like like Docker and Kubernetes. Apart from that, we also have a hub or a place where the community contributes quick stats of all the features that it can use to easily get started. All of this makes sense once we proceed to the other part of the session. So the major idea or concept behind Hasura is that when you build an app, there are a lot of things that are almost always repeated. Like deployment and a lot of features that are almost always repeated. So our point of view, what we did is take those things, automated that feature so that you can concentrate on your business logic and things that might be useful. And I'll go right, let's go. So the next part of the session is just going to be a demo and I'm just going to show you a specific also from Hasura. From Hasura then. So when you start with Hasura, you first go to this place called Hasura Drive Slash Hub. As I said, this is the place that has all the fixed up qualities that the community contributes to. It's just a combination of a lot of these stats like you can approach, and you can come over, try things like that. And you can just search for like one of the JavaScript components or whatever. So just things put together. Also apart from that, we also maintain a few official ones that you can just search like so, like user code and so on and so forth. Now for the purpose of this talk, I have created a set called ReactFood. What ReactFood has is basically just a simple React app and a Node.js Express app, just hello world app, apps running that is just set up so that it can just easily get started with it. This is the whole point of how everything is just set up for you with a simply working thing and you can just start off. So the only thing that you need to do to get started with Hasura is firstly sign up and log in all of the shared accounts. It's like it's nothing. You just put it in your account. And the next thing you need to do is install the command line too for Hasura Sailite. And so I already have that installed. So I'm not even going to do that, but that's literally what you have to do. After that, you basically have to copy this command and paste it onto your terminal. So what this command does is that it basically clones this project from Hasura Hub and clones it into your local machine. And then it creates a free Hasura cluster theme. So in this case, the cluster is called Amazing 12. This is where you can deploy your apps. Now that we have our project, let's examine the code or let's see what it has. Let's do that. Alright, so what it has is a config directory which we'll get later. A microservices directory and a microservices directory. What matters for this is the current time is the microservices directory. Thank you. So what matters for this current time is the microservices directory, which has two folders, API and UI. And so we can look at the code in that. So API is basically the simple Node.js app that I was talking about, which just has one thing, which says Hello React from Node.js. And so the next thing is the UI directory, which is a simple React app that we have. Again, a very, very straightforward React app, which has nothing to do with this. And that's it. So now what we can do is go ahead and deploy this. So what is the deployment flow? Deployment in Asura is similar to pushing your code onto a remote app. So for example, what I'm doing here is I added the changes, so get add, get commit, and add it to my commit history and then I'm just going to do a quick push Asura in Asura. What this does is deploy your code. Now you see what that means after the deployment is done. So it's basically taking all the configurations from your loader directory and applying it on to the customer. All right, so the deployment is done. So now as I told you, we had two microservices, one was called API and one was called UI. So we just have to type down Asura microservices open in API. So I'm going to open up API right now. Now, this is your Node.js app deployed live on a public URL that is accessible by everybody over HTTPS on the API subdomain just with a quick push command. This is all you have to do. If I add an account in Asura and if I add the command I do, this is how you only takes it the first 15 minutes. So actually, I'm going to open up the React app, which is UI. Okay, the React app deployed live over HTTPS. All of this handles for you with no trouble at all. Now, what I'm going to do next is make a few changes. So let's do that. I'm just going to go to a React app and change it. That's Asura presenting and React full. Incredibly fast typing. Again, so deployment is same flip. Hit add, hit commit and hit choose. Okay, this is deployed. Now if I just go back, press the page, changes it. Again, that was effortless. Okay, so now thing is the React app or whatever app that you have published or deployed is that in this case the React app is on the UI subdomain. Like it says UI and whatever. Now I want to change that. Let's see how easy that is. So this is where the cons directly comes into play. So I go over to the cons directly here. And so what the cons directly has is all the configuration that you want to apply to the cluster locally in your local machine. So each time you change it and you deploy, it's always going to put in your university. And so it's very difficult to get back and forth to what I'm going to do. So in this case I'm going to go down to a file called ouser.yaml and scroll down, find my microservice called UI and simply change it from UI and make it more platform. And again, hit add, hit commit, hit push or something like that. That's done. You go back. As you can see the UI is no longer valid. So I mean I think you don't have to do this. You can just go change the UI to the ouser. But in this case I'm just going to run. So the ouser. Open it up and now it opens up the ouser. Okay, this is also done. So these are simple things that I like to deploy apps. These are simple things. Now, so the deployment part of your application is the same. We have completely automated apps. So if you want to start, how many of you guys have developed this already? So a lot of content is left. So how many of you guys have front-end developers? React or what? So for you guys, what is this? If you know GX, this is all you need to do. I just started. But this is not all. What do all that? What do normal apps do? This is the deployment part of your application. What about the other things? Usually there are things like authentication that you almost always need to do. Then there are like storing your state or storing your app data in a database, right? So performing crowd on that database, basically creating, creating, updating things on that database. Then you may have things like if you want to upload in download files, something like a database as the bucket, or you may also have to send like an SMS, email, your user, right? These are also things that I think why should we do this over and over again, right? This also should be automated first. So that's where the Hasura 8-bit console comes in. So every time you get a cursor, you also get a Hasura 8-bit console. So the 8-bit console is just a specific place where you can explore these back-end components that Hasura gives you out of the box. So these are just, all of these are just HTTP instances, rest APIs just open for you. You can just try it out and use it anywhere, however you want to, your link data or what does matter, what does, what does we do is the API explorer where you just have a list of all the APIs that are available. So you can just try them out here. You can literally just try them out here and then do whatever you want. So your data API is your authentication, which is a username password, social login, which would be like Google, Facebook, LinkedIn, GitHub, then your mobile OTP, mobile password, email password, and then like for a lot of users you have some APIs. Then your file API, file storage, which is like upload, download, delete, notification, it would be like send, SMS, send email. All these it is here, you can just try it out and it will just work. Now the video is just catch up actually. So these are the APIs that are given to you that will just work out in the box, right? But one more thing, right? Authentication, always there. Why create the UI over again if you're just developing and unless you have like a product that you are really worried about, like with your colors, with your fonts and all that, you can just start off with like for development purposes or you can just, you should ideally have some kit or something that just works out of the box. Authentication, right? So we went on ahead and created this thing called AuthQ, right? This is also highly customizable. There are like two themes at this point and there are two themes, the dark theme or the light theme. And again, you go to the comment directly, make few changes, you deploy and your screen will also change the comment, right? So in this case, I'm going to go with the default login which is username, password. So as you can see there's a login, there's a sign up page. And how the AuthKit works is that it basically takes a redirect URL. So after successful authentication, it will route you to that URL. So what it does is basically after successful authentication, set up the theme and then route you to that URL. So what I'm doing right now is I set as a React app, as the React app as the redirect URL. What I'm going to do is I don't have an account yet, so I'm going to create one. So I'm going to sign up for this app. So I'm going to call it chasing test. We're going to see this also. And that's what it is. So as you can see it redirected us to our React app, right? All right, awesome. So these are the components that I can give you, right? Now what we're going to do next is that now we know how to define, now we know what features are present. What we're going to do next is use these features and build a very simple app. And what better app to build than React. So to build this to-do app, there are three major things that we need to do. So firstly, obviously, I want a UI very funny, so I'm going to end with you. Secondly, I want to link up my Auth UI kit to my React app so that I have authentication. And finally, I want to persist the to-dos that are put up by other users, link to the database so that there's a state, right? For user A key login, we have set to-dos, user B key login, that's another set of to-dos, right? So let's go to do that. So first thing, I've created the component. It's called a simple to-do component. I've just basically replaced the tip that I had earlier with this to-do component. It's a very simple, quite pseudo-hardy, like it's not really like that, but looking, but yeah, for this session it will work. So I've added that component. Again, the same was it. I'm going to do a kit add, a kit commit. That's what we're going to build at this time. And kit push us our master. This is going to happen a lot, guys. Kit push us our master. By the end of this talk, I think if you get anything, it should be kit push us our master. Yeah. So it's good right now. Now if I just go to the app and simply press the page, as you can see this is the simple to-do thing that I was doing. And you can just add. I mean, nothing really works. This is just maintain it's state right now. So if I just just press the page on this, it will go away. But you can do simple things like add, to-dos, you can be marked as something there, you can delete them, etc., right? All right, awesome. So now this is done. The next thing we needed to do was I wanted to sync up the audio I can do. So how would that work? Like the audio I can set up a could be redirect me to my React app. Now my React app needs to know. I mean, it works fairly simply. The audio I can do is just work. If you start off from the audio I can do, simply use the redirect. But how does the app know whether the user is out or not? Obviously, you use the cooking. What you would do is that you can actually go right to the API console and you will see that there's one API called userInformation. So what this does is that when you give it a session token, it will basically give you the information about the login user. So the session token is basically, so in this case, I am deciding like an admin token. So the API console basically provides you with an admin token that you can just use. So if you do that, see, the response would be the email. The email, the app's token, username, the user ID, which is the user ID. The codes that are assigned to this user, when you state it's like user and admin. All right, so this is, so what I've done is I've gone ahead and implemented that in the React app. So I'm just going to, I mean, these are the tiny things that I just put like a loading indicator and whatnot. I've basically included this. You have the same API. And instead of using the auth header, I'm just saying, try and show the example so that it gets in. And finally, I mean, because it's not a weekly code, it's just for the purpose of this demo. What I'm doing is basically, if the getUseInformation API returns unauthorized, I simply redirect it to my auth header. And this is actually what you take to do this. And I think I'm adding like tiny other things like showLoginScreen or whatever. All right, so I've done this. Again, we do the same thing. Hit add. Hit commit. I think a lot when I commit messages. Anything. You can type dirty code, but comment messages. All right, so, again, getUseInformation. So as you can see, it redirects to the auth you I get. If you're not logged in, I am going towards redirecting. Yeah, that's because of the code I'm going to do. You can just handle it. Just redirect that happens for a while. So if you just handle the state properly, I'm not sure this is a sure thing. It's because the render element was rendered first, but instead of the render, that is done. Again, new data is added to it yet. But this works. I think in the video, I'm going to go forward and I'll tell you more about this. Let's show this again. We need copy to move. Same thing works, because there's no section setting that comes. All right. So, part 2 is done. Part 3 is the database, right? So I want to... So what we're going to do is we're going to create it. So Hasura basically has the Hasura backing function. This is the database that it creates. It's very easy. So go to the data tab in the 8-day console. Go to click on add table. Call it to do. ID is in our text. So you need ID. Values, the value of the tool is completed. And this is the Boolean. And user ID, this is the ID of the user who is going to create this tool, right? And the primary key for this table can be ID. I've created this. Now, if you see this table is already created and this is done. So, another thing that matters a lot is that when you create a database, when you create tables, trying to people should not be allowed to get data from that. This matters security that you have to put. You have to put some permissions on your table that not everyone should be allowed to play with. So, this is another thing that comes by default in Hasura. So every table that you create, by default has an admin permission. So only admin users are allowed to play. I have to go personally add a user permission. So what I'm going to do right now is I'm going to add a user permission saying that unless this is a user, do not allow them to insert any data into this table. Similarly, I'm going to say unless this is a user's same permission, do not allow them to select data. And in this case, I'm going to select everything, like all the columns, ID, value, user, computer, and the user ID. Update, again, same constraint. But in this case, I'm going to say do not let them update the ID and the user ID because ID is unique and user ID is my own right. So I should not be allowed to update the user ID. Find it the same thing for deleting as well. So I should be allowed to delete my own data. So the permissions have been applied. Now, we're going to go back and have a look at the browser again. So yeah, I'm going to insert to and just insert somewhere. So since there is no entry right now, I'm just going to have like A, S, D, F, G, ID, value can be test 2. This company is false. And user ID is 1. I didn't use a given user ID in 1 by default. So as you can see, the table is inserted. So this one is the data that is given to you. Second one is the permission that you can apply. The third thing is, every time you create a table, instantly you get JSON APIs on it. So you don't really have to go right over and have an order or something to like contact a database. You have instant JSON APIs, very intuitive JSON APIs that you can just use to query this database. And I mean, the APIs are quite intuitive. I'll show it to you also. But even like to make your learning level a little faster, we have also added this thing from the query builder which will basically help you query data from your database. So in this case, we can basically have a look at that. So I'm going to say type, select. I'm going to say table, to do. And then I'm going to say columns. What I want is ID. I want value. I want is computed. And I also want the user ID. Select a tool for all the grounds. Not a lot. This is because I've not really added a path tool. And I'm not adding the section to my area. So this is not a lot. So, what I'm going to do is I'm going to go ahead and add the, and there you go. This is the tool that we add, right? Similarly, if it is exploded this tool, I mean the query builder and this tool, there's other ways. Apart from that, we also are running for the standard e-mail code. So what you need to do is, this is the e-mail that is this build that you've tried out and what's what's the thing. You want to have this in your client side code or some code, some program that you write it. So what you need to do is you can just go here, select from a list of languages that we have and keep adding one language like quite frequently. New languages you can use. I'm going to select JavaScript text because that's what I'm going to use. And that's it. I'm going to copy this. Based on my code and this is how it works. So what I've done is I've basically gone ahead and done this. Again, in this case, what we're going to do is we're now really going to use the author that we're going to use the reactions into so that we can get sent. And there's the same thing. So after getting the answers I'm just going to say get to do this. I'm going to show it. Get to do this like a select query then add it to do this like an insert query. Then you have family through it. It's like the opposite between company and company. It's like an update query. It's an update. And finally, once that is done, again, we go back to this. Yeah. Now, one interesting thing that nobody here is that there are there are a bunch of files inside this migration directory. So, if you're developing a production app or if you're building like a series app and which are used by users, you know, what I really have to environment frame. One is a production environment and the other one is like a staging environment. So in your production environment so what you could do is you would try out some features and make some changes in the last few days or you do whatever you want. You do it in a staging environment. You test it out. Everything was fine. Then you go to migration basically. Migrant is in the on your production environment. So what this does is this time I made some changes on the API console. These files, these.yaml files are basically just adding to my migrations directly, which gives lack of the changes that I've made. So, what is happening right now is that and these are just SQL commands that these have been added as migration. So this is like the create to command create to table command and apart from that you also have permissions one and all of those are just added as migration. So now in this world you move to another environment simply just have to change your cluster and push to that cluster and these changes just get applied. And and not only this now let's say I had added these migrations to my file and then push that as a quick start. Do somebody else who starts with this quick start will also get this. So I have to create like a to do table and add migrations to the world. So I'm going to add my migrations to my previous thing I'm going to say add migrations so that they start in our version control and I'm going to add the changes that I've made to this component. Hit push as your master and if you just press this page see now. So what I'm going to do is I'm going to go to the incomplete command and show you guys like a complete show including the like it. So now the right button I log in I have no to do Notice that the admin will not be found because I don't really have the ones to do See this now here the same session because I log in the same session the same session is active here as well and I refresh the page and it will be active here as well Okay so here go back start another new incomplete window and this time I'm going to log in with another user and I'm going to say chasing test 2 and as you can see the to-dos that are added to the user and I'm going to log in there so this is because this user that I'm going to pass this to I'm going to add some random to-dos which is go back to the previous page and press this not there right so I'm going to mark that as completed now if you go back to your if I go back here and this is going to be back up and just check out this you can see that the to-dos are added to the user and this is it so with this we've actually built authentication with permissions over like HTTPS all of this effort I only needed the only thing that I actually needed to do was know how to make hdcords in my client which is a React app know how to build my UI and that's it everything else which is click active everything else so this is done right now as every developer you want to move back to the community because I started from a good start why not give back to somebody who wants to build a to-do app so that is also quite simple all you have to do is go to your project directly and click on and type down what's that published you'll see a publishing as you use the name and you select I mean what's that in this case I'm not sure we have to we just select default version that's it and this is published so now if you just go so ideally you will go here change your description so that people know how to do actually so in this case the only thing that so since the migrations are also added to this if they simply declared they also have to do they already created the functions on that so the only thing that they actually need to do is go to the React code which will also be there and simply change the cluster name so I got the cluster amazing 12 when you create your own you'll get your own so you simply have to change that cluster name and that's about it and it will just work so I hope atleast in my opinion this is very effective because it's nothing like we basically started from the we took a bit start where nothing it had just two apps coming on it we changed the React apps it's very easy again it takes much time and then we ideally like simply do component to this we use the authentication we use the database to process like if you were able to react to all this you can just run it it's quite safe but what about React native React native does the same thing all your videos will find a good start and you just need to know the server side framework so if it's the app native it's quite safe you have to do that you have to make some required changes you can either like let's say in this case you have to know the application but this is about it like all you need to know is to build your app and nothing else everything else actually comes to you everything that can be automated has nothing and there are many things that we are looking at but at least at this point and this flow is fairly safe and so what I want for you guys is to go to the sign up you will immediately get two free clusters and these clusters like you when I say two free clusters like two free clusters at a time so the point is that you do not need these clusters as a pet like they are like cats so you don't like it you need a new one that's not two free clusters I mean for development and other things you can both watch Rahab search for you can just or if you can not find a good sign that you want just ask and you really like doing this and it's not and finally we want feedback from the developers like because this is for developers like it it makes everything quite safe and even if you like it or if you do not like it you should feel that if you don't like it there is why you don't like it so that so you can email us let's say you have a product that you want to put let me know some guidance on it email us at if you contact us on Facebook or Twitter so at HQ you can contact us on our public Slack channel or you can just go to our website and there will be a new part on the website click on that and it's like alright so with this week at the end of the demo