Golang Web Server Using Gorilla Package - Golang Web Development

[Music] hello guys welcome back to the channel this is tutorial series number eight here in harlequin's code regarding this uh still in the web development series here guys in markets code and we're about to discuss and continue about regarding this uh setting up our web application guys so right now we will do this simple kind of a web server now in golang using this gorilla max package and then we will use this and then gorilla all these are routers so that we can have those uh html locally we will do this uh here in the local development pc first guys so when we are ready then we can also publish to our production there so you can differentiate the two deployments there or how we can achieve these things so we will have some simple page to display here in local local development and after that we can publish that in uh web development our harlequinscode.com there so let's dive into this guys hey guys welcome back to the channel okay we will continue guys our discussion here in american code uh we were having this kind of uh discussion now we are about to create this uh golang web application here using this uh built-in golang web application guys i mean the web server uh this is what they call the net http uh package uh from golang guys so this is a very powerful here in terms of what you call this web server for goldline okay so we will do this and then we will display locally first our uh simple html file and then we will have this this kind of information we will use this uh bootstrap bootstrap css guys this framework for our css our layout our look and feel for our site and then we will uh then later we will uh probably we will change this okay when we publish from our local site and then we will use this gorilla package here which is the uh the most famous uh gorilla kind of thing i mean not that gorilla all the gorilla things there sorry guys just just kidding okay uh we will use these mocks and then handlers so far this csrf this one is uh right now um we will use this uh we will discuss this a few things guys for this and then the sessions um we may not use these sessions here guys maybe and probably we will use our own um we will we will create our own package for this okay so we will use this uh mocks handlers and then the csrf this box is for uh what they call these html routers guys so we will do this uh these are all the like like you have your home page here this is our router here um our products these are all considered as um it's a link structure guys so we will route all these kind of things and then match with the certain functions in golang so if user try to type this like americans.com products and then we will map it automatically to any corresponding functions there for our uh golem okay so we will continue so if you want to install this already pre-installed for us to click uh captured captured our time okay so you can just uh there is some instructions here you can normally go get here and then you which is the upgrade with the latest versions of course and then uh we will handling this um simple kind of thing uh this kind of thing guys so okay so we will uh dive into this application so i predefined all these information for us guys to quickly uh set up all the necessary things here i just explained a bit guys this one is are all uh this is my own package guys called sakto you can use this as well now this one is for getting the current time zone for our time this one we will use later when we run this web server and then we just execute here and then all this os set environment which is the time zone here then we can sub guys with your own specific time zone and then uh of course uh if you want to initialize your database here as well we can do that okay he's here but um this one will be in our future development guys so we can probably we can just disable this forward or just leave it like that first but we don't have this uh database yet so we probably will just delete okay guys so then we will just uh automatically remove for us okay and then um as you can see in my previous discussion also we have this guy this kind of thing guys actually this one is uh from the gorilla there gorilla package so we just uh paste it over in our application guys so these are all the standard codes for gorilla here these are all the graceful shutdown when we press ctrl c uh remember in our previous goku p series and ts notify series we always have this graceful shutdown when when the user can press the control plus c in their k keyboard and then they will be our application will be end as well and then it will be quit okay so these are normal things these are new for us here uh because this one is a web development series now guys so in our previous discussion we don't have this kind of a router here as you can see we call this a box and then new router okay this is our initialization guys for all the routers that we have when we speak about routers uh we will uh these are all the urls patterns guys url i mean your your slash something like this or dynamic url these are all the uh like a home page contact us these are all the url patterns guys that match uh because we are doing this uh uh we're getting these url patterns based on this uh gorilla max so right this is the initialization here and of course um this is for our uh csrf this uh which means the cross-site request for jerry in short this is a csrf protection so in the every http request we will having this kind of uh csrf or some added protection for our request for our pages or like http posts uh most likely for the http post guys so okay and then uh when we submit the data but this one guys is uh when you using ajax kind of a posting or the normal kind of a form post or method post a classic one these are all the necessary things guys but in our future web development here we will do uh we will we will use the another way guys so we are not using much on these ajax but rather we will use some kind of modern way is a new way they call it web assembly guys so we will discuss that in our next video as well so probably we will discuss that because previously i will we will do for ajax posting uh normally i will do the ajax posting guys i'm not using those classic one which is the worm pose and these are all very classic one guys so in my next video probably we will discuss um the web assembly which is uh wasab in golang so we will this one is more uh secured way of doing this kind of thing guys so we will uh explore this and then uh i will let you know guys in our next discussion so right now we just i just inform you about this if you are using ajax uh kind of posting so we will use this uh in a csrf mental wire here in gorilla so this kind of uh protection like any other side that access then um this request then we will invalidate here guys so uh these are all kind of some kind of a protection here so this again these are all the settings here for the course um these are all when you allowed this kind of a headers these are all automatically added headers for our html page and then if you allow this uh our domain only allow the origins these are all the standard uh headers guys like this get post bolt head and then the options the authorization here these are some kind of uh like if you're using some kind of any other token there something like that then uh like so many tokens okay these are all the settings uh guys but you can freely remove this but again if you're not using a web assembly guys um you can remove this but if you are using ajax kind of a posting or post request uh back to our server like if you submit some data there like login uh any kind of like you sign up or register or register a new record or something like that guys then you need this uh um this kind of um added security for your uh um back to your server guys okay but uh when we use the wasam probably we don't use this anymore okay so i just uh explained to you about the a bit this thing okay then we use this r use this one you can uh like if you want to add this in the all the request so any pages that will work it will be added so these headers will be automatically added for us this one is um this one is uh necessary guys but this uh what they call um side perjury the csrf is optional for us because uh we don't use the the traditional classic way also of either the form post the classic form post and then the ajax pose then you need to include this uh token um whenever you submit the data back to our backend server okay so um we can i just explore to you because i want to cater also for those people that are using this kind of um transaction or posting for our web server so right now uh also i added this uh logging middleware which is uh we have this i created this function here so that we can get trace back whatever the ip address that whoever is requesting it just maybe we can log but this one again is optional for you but i but i highly recommend for you to add this function which i personally do this because uh i also i use my own uh package which is uh sakto you can freely download this as well guys so you use this package freely there in my github it republic okay then uh the get get ip these are all when you get the client's ip address okay later we will show this again again again again guys uh this one is our middleware whatever you're using you just embed this router here so we will embed r that use this or the standard code for the gorilla and then the method middleware these are all the max standard one so this one you can you can remove this this one is optional this one is is a recommended this one because these are all standard headers for our html okay so this one is also optional it's up to you okay this one is a standard cup must be there again guys this one is our path this is what i'm talking about uh early on these are regarding our static files um as you can see we have a different kind of a settings there in our web development we have here under this uh uh our within our project uh the static here this one will automatically because since we are using here this will automatically route to this static uh folder here guys okay these are all used by the gorilla as well they are they are all also embedded this static loading of all our static files like the css javascript all these things and then the handler strip these are all the standard code guys so no need for us to worry you just uh replace it with the whatever your folder there there's also a sample here and then the file name later we will have this okay so um this is how you're going to initialize your router uh what i mean is from this um uh the api folder here as you can see we have this uh all these settings here you can have multiple files under this api package guys okay these are all my main routers which i i will i can have multiple uh files here like that guys you can have like a contact us about us or whatever is your um i just name it as a main routers uh easy for us to understand and easy for us to to know that this kind of apis which means this is application kind of thing guys so so this application programming interface for the in short api we can have multiple like this for example guys like the products or your contact us okay so these are all publicly accessible pages guys or uh shall we say a static page for us like contact us here for example all these kind of things guys so we don't have the contact us function yet so i just want to illustrate to you you can add multiple here you can group together all those static files like your about us or whatsoever guys okay even your maybe dynamic you can split guys or you can also do the same here as well your dynamic publicly accessible pages okay so right now we still have one router here which is the home page okay so then i created all this uh our own uh like a map string here because i need to use this for our thing guys okay um this is how we're going to load the home page or any kind of a pages or web page in golang okay so right now we have the standard arguments here the parameter for our for this function called home okay this home called here in our handler handle func which is this is the address guys if you know how if this means this is your home page okay like marlicans.com then when the user enter then your home page will be loaded okay so these are all your home page here what i'm going to discuss about here is the standard arguments here which is the w normally in golang guys you initialize it with w it's recommended i highly recommend this because this is uh that means this is your response writer so we are calling the net http package here for golang okay the standard package will go okay the response writer and then the request so that means we have these this is the request from the user guys so whatever the url there they have their own this uh these are all the struct also here a lot of information when you go with the source code for this golang http request it's another one is the response here so rw and then your response and then your request the request from the user is requested like a home page when they enter them malikans.com for example our favorite the domain name when you press that then that is called the request for the user and then after that our what would be our html page response so this is the response from our web server guys so when the user requests this home page then we will throw all this information back to the user whatever this is like this html here uh and then our header and then our um what they call the footer this uh that's why we are splitting these two guys so okay so this is how we're going this is a standard uh code for go guys you can always uh copy paste this okay uh for every pages for every kind of uh router that you're about to create guys this kind of function with with the response here writer and a response request so the response we will be giving this response here okay the site header our template when we go to this uh part as you can see the layout will be called guys as you can see this is the header here header uh what i mean later we will change this because we will rename early on okay so we will change now so this is the header what you call um front probably we will change this later for our other account so the header front and then the header dash we already have the header dash um header account we can change this also folder front okay footer account we will change this to uh dash guys oh we also have this okay we just paste later we will use this back guys no worries so we just change these and then change this as well okay so right now we are using this kind of a header because right now we are still in the homepage there outside pages and then the footer as well this is the footer okay footer front so we will use this water fan right now we don't have yet guys these are all empty okay so we will fill in this uh i want to discuss also guys this one um okay after this after this we will have this um data here and then we will throw the standard code for go which is the template here then we execute this is our response guys as i mentioned earlier these are all the response here okay guys this is the crcsrf token um these are all the basic one guys so we need to put this also like a page title description like canonical this one is a very useful guys because if you are dealing with some seo kind of thing then you can add on this these are all the embedded data guys when we respond from this response so we embed some information back to the clients whoever requesting this page so we will do this and then [Music] the settings which i'm talking about early on which is uh these are all our global settings okay this under these are config we have our global variables here uh remember early on uh we have this setting uh from this uh what you call uh our settings guys these are all the settings here so we embed also from our settings here so later we will use that in our html page so whatever we are for example those uh year started all this slogan all these uh kind of uh basic information for your site guys so we will load that as well so we will embed here okay so all the thing and then the canonical csrf this is what i'm talking guys so here we no need for us to put here in the home home html because this one or maybe we can use it's up to you because normally we will just put this again guys when you are using those kind of uh when you're using this um ajax pose so then you can use this or your classic post http post when you have some kind of a form okay so we will uh i will do this and then okay guys so right now our header front and then footer front we will supply all this kind of this kind of information here first because uh as you can see uh we have our and we don't have the index yet so okay so site and then uh as you can see i can concatenate everything here as you can see these are the bare html here which is this html folder and then with the backslash here so we can [Music] okay then we can call whatever these are index but we don't have the index yet okay so later we will get some basic information for our hello world or something okay guys so in front we can uh okay we added here in our previous one but uh just a plain one later we will supply this information guys because we need this to load our home page and then our uh this is the standard structured for golang's template templating guy so you need to define all these two curly brackets in front and then close singles as well and then you define the variable called the header or whatever you can name here guys uh you can read really freely define this information here and then the footer is also for the folder and then you end this okay but we need uh to embed the html here as you can see this is the html file right but we already embedded the golang templating here okay guys so right now i also downloaded this um in our previous discussion uh we will try to use these bootstrap template the basic template here is a decent enough for us to to put something the simple html there guys and then and then the inputs here all these things later on for our basic rod operation uh by using the mysql so stay tuned for that guys okay so uh early on i downloaded related the source code for this uh bootstrap 4.5 okay so we will do this and i already extracted what i call this page guys uh this one so we will be having this and then probably we can change this logo to uh mahalikants our own or you can you can have your own template also you can purchase whatever the standard template for a bootstrap there or your own there's so many kinds of css framework out there guys there's a lot there but we will use this bootstrap since we can use this okay uh uh easier one as well but the others also is easy no no problem um all css as you know if you know the css all this a basic one the html all these things you can learn that separately as well guys okay so right now we will speed up a bit okay so these kind of things these are all the basic estima here so this is the look and feel so we will uh [Music] probably we can remove this or something i will it's up to us and we just want to ring to replace us okay we will identify which are the header and which are the footer for this template okay guys so if you have your own template you must identify which are the header part and then the footer part because we are all using the same for example um this kind of a css okay so right now we will probably copy this this is the header part guys um okay like for example let me just copy over um body okay maybe up to the body part uh we will paste this uh from the header okay so these are all the header part guys okay so here is our body here guys so this is our body here the content of our html so we don't copy that that one guys i think this one no food okay this is the footer section okay so where is the 2017. yeah we just have just some simple footer guys so okay we will probably copy this okay maybe we need to split this here we don't want to paste it okay probably okay form sign in okay we just uh put some simple dib here guys okay um and then place it here okay this is our footer part okay so we can copy this and then we place over to our footer footer front okay so this is our footer here guys okay as you can see um the header part is up to the head and then the body here but never end the body okay because later it will be combined together when we we call this a header and the footer but our index is stable whatever you maintain there basically all the html body content only you can paste over here okay so this is our footer section but i think we need to include also this css here now we can use this class guys for example guys okay from this div so we can use this so the look and feel may be the same okay so and then [Music] okay then our body section is here so we can copy this so okay guys um i also pasted uh this is our index now guys as you can see our template is different for all those um non header and none footer kind of thing okay so these are all the settings here we define all this header okay remember that we don't have the dot here as you can see in the template here is quite different as you can see when you run like the index it's email okay the thing is you don't define because this one is we are about to use the header definition here which is defined here you need to match this one guys otherwise your template will not work okay and then the define footer whatever the name you're setting here or whatever the name you would you you place here under this double quote inside this quotation here guys uh you need to call this by using this uh template as usual the syntax is like this like open and close double what they call this curly curly bracket curly braces as you can see when you call the template this is the template guys see define header and then there is also a n don't forget this and then there is also a define footer whatever your name here and then you also close with end okay after that you need to combine together all these template as you can see the front and then the the header and then then the footer we call those uh template ones only guys so otherwise your page will be funny in between that you can add your uh body html as you can see our as you can see guys uh uh the header part is always this one okay remember this later the title don't worry i know you have a question uh your title is always fixed or not now later we will change this dynamic dynamically guys okay no worries canonical or whatsoever that you're calling here okay you can load the default uh it's the default css default javascripts and that is a filter here right now we don't have a much complicated folder i will show you later when we call another javascript here like you load those javascripts so right now we just a plain simple thing guys so that you will understand uh how the golang templating works okay right now we will do this template header we call the definition for this file here then it will be loaded first as you can see we call on the first one and then if you call it if you call the photo there first then problem oh guys guys okay header and then footer then the in the in between html here you can add like uh like a table or something guys these are all consider your body html as you can see in our in front here we have a open body here okay that means when you add extra uh [Music] everything that you had added will be uh will be automatically and guys because this one is concatenated guys and that means it will be loaded first as you can see our structure for our header is up to this part um okay these are all the things then uh in between that that means this is inside the body uh tag for our html so whatever you're adding here is automatically will be in place will be placed under this inside this body tag and then in our footer part is the closing of the body tag all this closing and then closing up with the html tag the body tag and then the html tag as you can see you can add also multiple we can add many here but normally you can um your javascripts all these things yes but later but we will we just had that later on but i don't want to overwhelm winder so i don't want to exhaust you with some many information okay so right now we don't have this table uh probably in our demo pages here they have the form probably we can just copy over but the model the logo is here so we don't have logo yet uh no worries we will change that okay we just want to see how it looks like okay so these are all the things guys but we don't have this solid one maybe we can get first hold on okay guys i pasted this uh under this static here uh this is this is an sbg file guys so um later we will just um discuss any png jpeg whatsoever our logo here will be replaced later on guys so okay so i guess we are good to go okay guys so i think this one we remove this because this one is now okay we don't want this okay so let's see what will happen here uh okay so we will run this web server now i think all the configuration okay okay then the main router we also called here from our main.go okay our static page so let's see if any errors there go run main.go let's see what will happen again guys you can change this ip address now our web server started okay so started now we also have these um logs automatically created for us guys these are all our logs here from our favorite itr log you can freely download that one guys you can use this from my github there it republic slash itr log okay we have this log here also and right now we are running this one guys this ip address later probably you can change with our web server ip address but because right now we are working on a local host here in our development laptop so now our information this one you know already guys from our previous discussion from our ts notify series go copy series we are also using this uh um kind of a thing guys so these are all the blocking kind of thing this web server web server started as you can see this information here right now we will run using this uh as you can see uh this is our port number here guys uh our web server now already started using this port number you can identify you can assign um any ports here but um then in our uh what they call our web server our production web server uh if this port is not open then we will allow to open this port from our uh what we call this uh our nginx there our thing so we need to allow so that it can access uh publicly but this 8081 is the most common for golang but you can always change these guys don't worry so we will just use this 8081 port okay so this is the address we will go ahead and access this um now you can type also localhost guys 8081 so we can try this hold on maybe we will change another port okay guys so we'll continue uh we will try this one guys there's some small uh issues here regarding this uh css guys for the bootstrap because we have downloaded i guess it's not the match guys so when i use this um from their cdn uh it's all working i mean the page is working properly guys as you can see when i refresh when you run so it's totally working now guys as you can see the address here is local host or uh colon then 8018 this is our local development guys uh no worries this one will be we will set up this uh obviously we don't we cannot see the port there we just only see the marlikenscore.com for our production site but in our development side we always can see this setting guys this one is our we can only see this uh development only so no worries about that and then i remove those folder first because it will not um it will it will display somewhere at the right side here guys so so at the moment is now the look and feel is totally the same guys for our local development and then for the bootstrap example there but actually they are using uh what they call this uh cdn uh all these things guys but later we will uh fix this in our next saturday series here in manikins code this one is just a small issue guys this one is just a css not much with their with their own when you download this bootstrap there uh from their example only guys this this example is not uh for this example the floating labels it's not much with the current version when you download here right when you download from this bootstrap itself i mean the source file is not i think they forgot to change the setting there but when you use this js the deliver uh which is the cdn here guys when you link this uh bootstrap here and then it's fine totally fine but it's up to you uh if you want to use this cdn here okay or rather if you want to download also it's okay it's fine but this one is just we use some of the sample examples there from this side guys examples so we choose this for our uh demo purpose guys uh i just want you to to see the thing but when we change to whatever this uh change back to the local one i already copied but it's still not uh the the the layout is distorted guys so it's not uh it's not a good design there so when you repress i see um when you inspect also it's not uh this one is just okay guys because this one is a fake icon this one is for the icons here we don't have yet at the moment but later we will land this okay in the network also don't have something like uh when you inspect all okay the minified the css also there but i guess this minified is not um i'm missing this kind of example guys for the floating label labels i think this one is still an experimental uh page because they put some notes here okay but we can choose another template for next but maybe we can stick around for this okay when i switch back uh we use the cdn then probably i should be working okay guys so that's all for today guys so now we are seeing this kind of information okay so now this serves as our home page for example guys but later we will change this so i'll pour like for example um like a simple uh logo here like that only guys this it's up to you but right now our main goal is to finish this one uh the main routers this is now we have successfully launched one home page one page and then early on we have some error also because right now uh this index html i added this uh front here uh maybe we can change this to the settings there also uh because right now and this index html i put this in front under this front folder here html in front right now this root template here is only the bare html of course this is the bearish demand guys but uh we place this index at this html and then in under this front folder which is here located in this part so right now we also pasted all these uh these settings here from the bootstrap there so this is served as our body html now it's all okay guys now we are working and then it's properly serving the html file here um okay so thank you so much for watching guys okay guys thank you so much for watching my video these are all the things we have done we have successfully finished uh launching one homepage one html page that serves this one is at the moment we are still in the local web development here um after we finalize everything then we can deploy to our production server so uh right now guys we have successfully launched one home page one html page and successfully serve in our local web server golang web server here so this is a very good example guys that is i can illustrate to you how we can use the golang templating uh engine there and then what what they call the other one is the all these things guys uh the the bootstrap then we connected everything and then we tied together all these uh connections between these css javascripts and now we lay out everything for our golang web development series here in marlikan's code if you never watch my previous videos you can always watch my previous videos guys and then you can replay as long as you want all those informations and then i please consider subscribing to my channel so that you can have more videos like this and thank you so much for watching and see you in my next video guys here in parliament's code may god bless us all thank you and [Music] bye-bye

Channel: Maharlikans Code

Views: 402

Keywords: Life As Software Developer, Maharlikans, programming guides, step by step guides, go, golang web development series 8, golang web development course, web development with go, golang tutorial, learn to create web applications using golang, building scalable web apps in golang, golang good for web development, gorilla mux vs net/http, golang http server, golang gorilla mux example, gorilla mux middleware, gorilla/mux vs httprouter, gorilla mux tutorial, golang http router

Id: IwYaSOejDLs

Length: 45min 59sec (2759 seconds)

Published: Sun Nov 15 2020