Embedding static assets

Summary

In this video, I demonstrate setting up static assets for a Go web application using the embed package. I walk through creating directories for static files and resources, then set up Tailwind CSS by initializing package.json, installing Tailwind, and configuring its utility classes. I create a CSS compilation script to generate an output.css file, and use Go's embed functionality to include static files directly in the application binary. Finally, I configure Echo routing to serve these static files, showing how to seamlessly integrate styling and static assets into the web application.

Transcript

One final item remains before we can start building our block. We need what is known as static assets and these include things like images or javascript files, style sheets. It will basically enable us to add interactivity and styling to our applications. Now there's a bunch of ways you can add these to your website or to your application. Go has a package in the standard library called embed and what embed allows us to do is to simply include files in the binary that gets outputted when you run the go build. So this makes it super easy for us to deploy our application because everything we need is simply packed into this binary. So let's set this up so we can begin styling our application. We'll begin by adding css so we can do some basic styling while we build out our views. In the next video i'll be covering Tailwind in a bit more depth going over the philosophy behind it how it works so if you're new to Tailwind please just stick with this video things will become a bit more clearer in the next one. But for now let's just go ahead and add a static directory and a resources directory and then in static we are going to be adding our css directory. Yes please and that is all we need in here. Next we need to jump into our resources directory and initialize our package.json file and let's just call it block and it doesn't matter alpha can be mpv. This looks good. Then we're gonna say in prim install install Tailwind css as development dependency and then initialize our Tailwind config file. You can see here created Tailwind css config file. If we jump into this one we're not going to make too many changes in here for now we just need to tell it where to look for styles and that is going to be in our views directory and then look for everything in here that has a temple extension. Then we also need to include all of the utility classes all of the base styles that Tailwind ship with all of its components and to do that we can use this Tailwind directive and say Tailwind base, Tailwind components and Tailwind utilities. Let's spell that correctly utilities yes. Finally we need to add a command to our package.json file that will compile all of these utility class into a single file so that we can reference that file and if we go ahead and remove this test under script and say watch css and then we're gonna have say npx Tailwind css and then give it an input which is our newly created base.css file and then an output destination which is going to be static css output.css I'm going to tell it to watch so that every time we make changes it will recompile and regenerate this output.css file. Great if we now go out and say npm run watch css you can see it's rebuilding and it keeps watching so this is a process that will continue but we can skip out of it and go into our static directory and we can see we have the output output.css file that we can then just reference in our base template. Since we already have our base template there's not really much to do now we could just go in and then we add this under the header tag and it's gonna be a link I messed up here it's going to be a link to static css and output.css the rel attribute is going to be stylesheet and that is basically what we need in here for now to actually include whatever is in the static directory we need to set up the embed functionality that we talked about earlier to do that we jump into static here and create a static.go file it's gonna be a package static and we're gonna say go embed everything in this directory and put it into a files variable of type embed file system so the comment above here simply just tells the compiler that take everything in this directory and then include it in this files variable we can now take this variable and go into our routes package and then when we set up our routes you can simply tell it that it needs to include these files but since we're using the embed file system type we need to to tell echo to strip out a prefix which automatically gets added from from this embed package so we're gonna give it the point of the variable and say please strip out static and this is simply because these files live in a directory called static if we didn't didn't do this we will have to reference it as static and that is really not that clean so we just tell echo to replace that prefix and then we route it to static with the staticfs method which is a method on the router and say go whenever we go to static sorry it's less static please serve all of these files now if i go out and say go run main.go we get the server running and go into our browser here we can see that we don't really we don't really have anything right but if we go up here and put in our path to our css file we can see that we have a bunch of classes here that we can then reference and these comes from the binary this is simply included in the binary