The Ultimate Go Web Stack: A-H Templ, HTMX, Tailwind CSS, MariaDB

hello YouTube and welcome to another video today we're going to talk about the Gotham stack if you're tired of using JavaScript to making very responsive web apps probably you're a go developer and you want to figure out how to build web apps with go well I got you the solution the Gotham stack is a very simple yet so powerful stack lets you actually build very fast responsive modern UI lookin apps so let's get to it what does Gotham stands for so in this tag we're going to use go for our back end for everything for our authentication for our like session management anything you could think of we're going to use go language and go modules to solve that problem now we're going to use also as the T stands for temple so what is Temple if you don't know guys Temple is a new way or like a kind of a new package that lets you write HTML in your go files right it lets you actually write go code with HTML code and with JavaScript code all in the same file it's kind of like jsx but it's not jsx it's a very unique way that lets you write HTML inside your go code and it's very powerful and it's also lets you integrate JavaScript functions within go variables and we could use that in your app so Temple is a really really powerful way to generate HTML temples for your web apps now as the H stands for HTM X we're going to use hmx and if you don't know hmx basically it's a very minimum JavaScript code that lets you swap the HTML elements like a flash baby it's really fast it lets you swap them change the data seamlessly without browser refresh without any JavaScript overhead if if you would have done the same thing with react for example you probably end up with a lot of code and a lot of JavaScript in your app and it's so developer friendly so I really recommend it even if you don't use this stack you should definitely learn HDMX even if you don't even use go let's say you use JavaScript backet you should definitely learn htms I as I believe it's the next thing like it's the future of of web develop it's been around for a while but lately it's has more people actually adapt it and use it and it's very powerful the a INR stack name stands for Tailwind CSS in this stack we're going for simple fast get to the point but yet so powerful and we can customize it whatever we want Tailwind is just that so Tailwind CSS makes you write less CSS while it generates you their CSS and also removes the CSS that you don't need in your app so instead of saying I want to center a div I will display to flex I I will make the items align items into the center justify you just write three words you just write in the class name of your HTML tag that you want to center it for example you would just write Flex you write item Center justify Center and that's it you're done you don't have to write any CSS code and you don't have to leave your HTML code or at this point your temple file to generate Styles you just generate Styles inside your temple file by writing class names that will be then generated into CSS very powerful and they have actually good documentation and very good styles that you could use right away in your applications and lastly the m stands for Maria DP which is a very powerful mySQL database that has relational database squil database as the priment say it and it's very powerful that's face it guys the most powerful and the most popular database is the SQL database land or this equil L right so you could probably use any of that but we chosen Maria DB because it's proven it's Rucker you know fast server response and it's very good and user friendly and it's one of the easiest way to interact with SQL databases so that's it for our Gotham stack now let's get into installing the Gotham stack and running it into our computer don't forget guys if you like this video you know drop a like help me grow this Channel and I'm going to get you more and more tutorials about the Gotham stack and about web development and coding in general I'm Ali and this is more than Cod so here I have an abun machine that's I just boot it it has nothing like I installed no program into it so we're going to take you guys step byep step how to install the Gotham stack so first of all I need to log into my machine as you can see it's a fresh installation of abunto I have nothing installed on this and I'm getting a bunch of Errors I don't know why but doesn't matter because we're going to get into the installation right away so the first thing we do as we do in any machines we go into our terminal and we pseudo app update or use your package manager to update your packages as we can see we don't have any updates we can go ahead and upgrade our packages we don't have any upgrades okay so after we update our packages we're going to go into our browser so if you guys go to this repository and they're more than coder than you goth them you're going to find this basically what we need to do is follow this instructions to get our development environment um ready so we need to install go we need to install git and Maria DB and no. JS now if you have a Mac and you have already the home brew installed you can you can simply just run this command and we'll install all of these things for you in this tutorial I'm going to talk about hunto then we're going to go ahead and install these things inside auno so to do it is to install snap so we're going to go ahead and say PSE sudo app install snap or snapd as they call it and it's already installed because it's abunto then we're going to use snap to install go and install the other dependencies or the other OS Tech that we need to get our environment ready so let's do that and we'll say that you need to proceed this command with a classic let's do that now it's downloading go like for us okay so after we installed go let's check if the go actually installed by running Go version we're going to see that we have it's already installed in our system the next package we need to install is git so we can actually clone this repository so what we need to do is PSE sudo app install or Pudo snap install gift I don't think they have it on the Snap Store so what I'm going to do is pseudo appt install instead so I'm going to go ahead and use the official package manager which is appt to install git let's do that we can also say that if git installed we can run the version command to check if it's installed as you can see it's already installed now the next package will be nodejs in the classic repository let's do that now we have nodejs installed and we could also check for our node version prompting this flag we have the node version 20 which is probably the latest nodejs version to install Marb we just simply run the command P sudo install or PSE sudo app to install Maria DB server okay so after Marb is installed we can go ahead and run the command MySQL now we can see that we have access denied so probably we need to do pseudo MySQL or we need to give it yes after we run pseudo SQL we now entered our Mary DP server after the installation on abunto Linux it's already been running we can show for example databases we have in our maras server if I could just type this the right way so databases and then we're going to see that we have the official default you know databases marad DB server is running and we can now proceed to other steps after we installed the OS dependencies the next step is to install tailwind and Temple and to do that we just simply have to run these commands first we're going to install bun by running this command and so we're going to copy this command this will basically install bun for us and Bun if you don't know what his bun is we will use it as a package manager here and as a JavaScript Runner it basically replaces mpm or yarn it's a faster package manager very less problematic than mpm for example so now we need to Source our Bash by tying the command Source do bashrc now we'll probably have bun installed we can see that we have the number of the version of BN that we installed okay and to install tellin CSS you guessed it we will use bun as our package ventor so what we would do is to basically run this command which is bun install flag G which is for Global and then tell when CS as the latest it will install Tailwind CSS as a global package in our system so we could use it in any other application without the need to install the node modules heavy object in our apps and then lastly we're going to install Temple we can find all these commands in the repository as you can see I'm copying and pasting this commands from our repository okay so now after Temple is installed and basically all the dependencies is installed now we're ready to install the starter app obviously we could find it in the repository so following this steps and the repository we're going to go ahead and find this step of cloning the repository so we're going to do that but we're not going to do that right away in our home directory what we can do is for example create a create a directory of projects for example that we can CD into this directory and then inside this directory we create a product of ours let's say my app we're going to CD into my app and then inside this we're going to clone the repository after we base this command basically for cloning the repository we're going to end end it with a DOT this will basically take all the content from this repository and put it inside this folder to change the module name we just simply go ahead and use go to do that so we're going to go mode and then edit then we're going to go ahead and say flag module and we give it the new name for our module we're simply going to be for example my app if we press press enter now if we cast our go. mode file we can see that the name of the module is in fact indeed changed now we can proceed into installing these required packages or dependencies to do that you simply go run this command go mode tidy this will ensure the installation of these modules inside your folder before running the app we're going to go ahead and run the command make temp Le to make or generate the templates for our app then we're going to see that make Command is not found basically we need to Echo this into our into our uh bash RC so we can find or like we can locate this command using the bash so what we we need to do is we need to Echo we're going to Echo this into our bash RC now we're going to Source our terminal to refresh the bash RC obviously we choose the right location for The Bash RC now if we clear the terminal and make Temple again use the command Temple generate and then dot for choosing this directory we're going to see that's already generated code for this components. Temple as we can see with zero errors so now we can clear the terminal next thing we want to do is to test our code so we're going to go ahead and use go test we have a build error here so now we have a problem because the goal that we installed from the snap store is different from the go mode that I initialized my repository with so you either going to update your goal or what we're going to do is to remove the goal mode and go sum and we're going to basically initialize a new model using go mode in it we also need to remove the components generated Temple so we remove that then we're going to use go mode in it to initialize a new project we're going to call it for example my app then we run go mod ID to install the needed packages after that we can run the command Temple generate then what we could do is to run the test so go test and we can see that we have a failure test we can see the problem with our Temple has gone but we now have a failure test in our init database the function that tests the database has failed because it has no access to the rout if we cat ourv file you can see that we already have this rot we have the password of none so if we for example check we can run the command MySQL and then flag you give it the root user then flag B we press enter we have the same problem which is access denied doesn't have the privilege to access the database so what we need to do is we create a new user in our database installation or in our database server first of all we're going to access it using the pseudo privilege then we're going to run this command so this command will create a user um you know by your name that you choose and your password and then the password will be nothing or the password will be 1122 11122 we're going to press enter we're going to see that query okay zero rows affected that means this user added next thing we need to do is to Grant the Privileges to that user so what we need to do is to run this command and obviously right here your user in my case will be Ali this command what it does or this syntax it says Grant all priv on this user with Grant options all right so we're going to go ahead and press enter to this command we can see that the query passed now we're going to go ahead and flush our privileges so we're going to run this command and then we're going to exit now we want to check if the this would work so we're going to go ahead and call MySQL again we call MySQL and we're going to go ahead and flag the user and we say the user alley and using the password it's going to prompt us for the password for the user alley and we're going to Simply enter our password in my case it was 1122 11122 so we're going to do that and then boom we have now the access in our database without using audu privileges so now we're going to go ahead and exit we simply going to go and update ourv file to include the new user so the new user will be not root but it will be called Ali and the password will be 1122 11122 okay after that we're going to save and quit we're going to clear the terminal we can now go test the app by using the command go test flag [Music] B we can see all the tests has been passed to run the app we can simply go ahead and say go run this will run the app and as we can see it's running on this URL if we press this URL so we're going to install in cromium to check our website because for some reason Firefox doesn't work in this machine all right now that chemium is installed let's check if chromium will basically open can run the command chromium now we could access this URL inside our Chrome instance so basically what we're going to do is write this URL which is the Local Host URL and the port 8,000 boom we have our website ready and running in this new machine this website is a very very very simple example of the Gotham stack you know if we refresh the website we can see this text is actually moving this is obviously happened using JavaScript function a simple one that are written in inside the component um file here we have a database count comes from the database so whenever you press the count it will increment and this will be inside the database so if we for example open up a new incognito window and we access this port we can see the same number from this um from our s this is happened because this is an actual database um number if we for examp example increment this to 30 whenever we make a request here even if it's a refresh page request or if it's an increment request we can see that's already changing and this is basically using HDMX so the power of HTM X the power of Temple that lets us use JavaScript and the power of an SQL database we can see what's the use of Gotham stack and obviously you can find more examples at hello Gotham which is a more in-depth app that you can find in my under you know my repository in hello Gotham I have basically a bunch of um information about the Gotham stack and also we have you know directories we have handlers we have session management we have routes we have to-do app and we have a counter app that also uses session and not just a global account this was the installation of Gotham stack I hope you guys like it if you want more tutorials I'll be more than happy to provide more info about this stack this was this video the Gotham stack I hope you guys enjoyed it I hope you guys see the potential of it and I hope you guys all use it and I'll see you guys in another video

Channel: More Than Coder

Views: 6,144

Keywords:

Id: nSdVRhW8epY

Length: 19min 19sec (1159 seconds)

Published: Sun Dec 31 2023