Embedding assets

Before we can start styling the markup, we also need a way to serve a style sheet. We need a CSS file that holds all of the classes that we're going to be using in our markup. And there's multiple ways to do this. We can add it to our server directly, have the .css file there, and then point our application to where that file live on the server. We can put it into our S3 compatible type bucket.

and then put it in front of a CDN, which is a content delivery network, where they will then, or the CDN will then be in charge of finding a server that is closer to the user, and then from there, serve the file to the user's browser. However, Go also has a package, or the Go standard library has a package called embed, and that allows us to include files directly into the compiled binary.

and this approach simplifies deployment by packaging everything into one binary. And then when we actually go live, we just put our binary on our server and we are ready to go. We don't need to worry about uploading this CSS file somewhere. So that is the one thing we need to tackle. And then we also need to tackle that we need to take all of these classes and have something read through them and then create this CSS file. Tailwind has locally

created multiple different options for this and the way that I prefer to do it is to use the standalone binary. So we're going to download this binary which is just a program we can run alongside our other commands and then that will look into the views folder, find all the classes and simply create this CSS file that we then embed into the binary that we're going to be deploying and then

everything will work just as it does in development as it do in production. The only difference is that we are gonna be optimizing the production version so it becomes smaller, whereas the development version will be bigger. Okay, quick, quick rundown of how to deploy static files and CSS in particular. So in our terminal here, I am gonna be creating a new directory called

assets and inside assets I will create another folder here called CSS and we're not going to be creating anything in there for now we're just going to create a file here called assets.go it's going to be a package assets and in here we're going to say var files and bet if s let's get the import and then we say

Go, embed, and then I start and then I simply embed everything that is in this folder. Right now you can see the CSS directory contains no files, but that will get dealt with in a second when we actually compile our CSS file from our classes. Next, I'm in the Tailwind CSS GitHub repository, where we can go down here to releases, get the latest one,

at least after time of recording, and then pick the version for your OS. I am on Linux. I'm going to be downloading this one. Download. And then I'll see you in the terminal once this is done downloading. Great. So with the file now downloaded, I'm going to create a new directory called bin. There we go. And in here, we're going to add all of our binary. We can add our binary files, all of our, sorry, that binary files, our binary programs.

And for now, this is only going to be the Tailwind CLI tool. So if we go out of to my terminal, and then in here, my file is now in my Downloads folder. So if I do a little move command here, Downloads and Tailwinds, we have the one right there. And then we're going to put it into the binary directory that we just created. And let's just check what's in the binary. It's right there.

on a like Linux based system and also on macOS you will need to make this executable executable. So we're going to see mod plus x bin tailwind css and now if you go into bin here and we can actually say tailwind linux x64 and we can run it and we can see we have the versions of it downloaded we have some commands and options that we can use. Then we also need to create a

base CSS file where we define the sources for ways to look for classes or maybe do overrides where we add plugins. There's a lot of options available in Tailwind. So we're going to create a directory called CSS and inside of CSS, I'm going to create a file called base CSS. Give that a save. And then I'm going to say import Tailwind CSS.

I'm gonna say source to be views. So this then tells the tailor in binary where to look for the classes or for the files that has the classes. All right, we get that a save. Now we need to add a controller so we can actually pull this file out of our binary so that we can tell the

the base layout to pull this style sheet out. So we need our controller, we need a route, and then we need to add this in our router, then we need to update our layout, and then we are pretty much ready to style our application. Great. So let's jump into our controllers here. And at the bottom, I'm going to say C, controller, and I'm going to call this one style. Again, we have an echo.

context that returns an error. And then we're gonna say style sheet, style sheet or error equals to assets. And then the files variable that we just created. And then we're gonna say read file. And we know this is gonna be inside the CSS directory. And we haven't done this yet, but the output of file is gonna be called style.css.

We have an error, we just return the error. And if not, we're gonna say return, easy. And we're gonna return a blob, which is just a response where the status goes and some content. Right, we're gonna turn status, okay. It's gonna be a type of text slash CSS. And finally, we're gonna pass in the style sheet, not HTTP, it's HTTP. There we go.

And this is our style controller that will pull out the content of the embedded file and then serve it to the browser. Great. Let's go to our routes.go file here. And we're going to create a new route called style. And we also are going to have other assets that we're going to be adding to this project.

have a prefix for all these assets that we pulled out of our binary. So what it will look like is something like this, assets slash style.css. But we're gonna be reusing this part. So what I wanna do is go up here and say assets prefix. Gonna export it.

and then say assets prefix plus style.css. So now we have an easy way to kind of group all of our assets under the same prefix or the same route naming. Then we go into our router and in here we say e get routes style and that go to controller style. We don't call the method.

Great. One final thing, we need to go into our layout. And down here, we need to say link href and rel style sheet. And then close it. And then we simply pass in the route we just created, which is style.

And we give that a save. And this is how we tell the browser that this is a style sheet. Here's the link. Please pull it down so we can apply our styles. We are almost ready to run this application. We just need to add some helper methods to compile and optimize our CSS. So we go into our just file down here. We're going to create two commands. We're going to create one called watch CSS.

build CSS. We're gonna say bin and then tailwind. Ah, that was the name. It was bin tailwind, tailwind, CSS, Linux, x64. And then we specify an input file, which is our CSS slash base CSS.

and then we specify an output file, which is gonna be in our assets, CSS, style.css, and then we say, watch, always, so that, oh, walsy, oh, wait, so that when we run this command, we always, we'll be continuously watch the source directory that we specified to be used for changes, so that you know whenever it changes,

it will then recompile the CSS and output a new file. So we have the latest styles that we need. Then we can basically take all of this and then just remove the watch and add dash dash mini file so that we have an optimized CSS file for me to go to production. And the last thing is that we need to tell our run command to include this watch

CSS, so we get those changes as well. And now if I go ahead and say, save, say, just run, we should hopefully run without any issues. And we do know we cannot find package. Okay, let's look what happens in article. Nothing. Let's try one more time. We are running. It was just Timberlain to recompile.

Great, now let's jump back into our browser and go into our local host. And here we go, we can see something has changed, not a lot, but it doesn't look the same as before. So some of the styling, like the links are no longer green, sorry, no longer blue. We filled up the entire screen. So this is the base or the resets that Tailwind applies so that

It's more easy to develop across different kinds of browsers of Firefox, Chrome, Brave, whatever you have. This is a reset so that this stays consistent across browsers. And also, if we click on the readme here, we see sort of the same thing has been applied. We have some consistency in the paragraph text here. And you'll see our header is also the same size as the paragraphs.

This is working. Our style sheet is being applied or the reset style at least is being applied because we haven't added anything yet. So the next episode we're going to be dealing with making this responsive. So it looks good across mobile, iPad and computer. And then we're going to actually be adding a theme and start making things look nice and make them look like a professional blog.