Beginner Clojure web app Part 2
Customize the favicon, site title and home page message.
If you haven’t seen Part 1 yet, you can follow along with that here or here.
Right now, our code is simply displaying text that says “Welcome to cool-app”. Where is that coming from? And what about the html file? Let’s take a look at what’s been generated for us, and along the way we will customize it a little bit to add some individual flair.
First, let’s look at our html folder within our cool-app project: resources/html. Here there are two files, error.html and home.html. The error page only shows up if there is an error, so we don’t have to worry about that for now. Let’s look at home.html because that’s what’s telling our page how it should be set up.
If your file looks a little different, that probably just means that you downloaded a different template version of the Luminus project. There are instructions in the previous post on how to get the same version I’m working with at the time of writing.
Let’s talk about what we are seeing here.
First, there is some information at the top, within the <head> tag. This code includes some basic html info along with the site title. The site title is what you see in the tab of your browser, next to the tiny picture called a favicon. This is not the “Welcome to cool-app” that you see displayed on the web app.
Where is that coming from? That’s actually coming from one of our .cljs files. Actually, the only .cljs file we currently have in our project.
To see this part, and see the shadow-cljs watch app change in action, go to src/cljs/cool_app/core.cljs
Look at the code that’s already been created for us by the template:
(ns cool-app.core)(defn ^:dev/after-load mount-components []
(let [content (js/document.getElementById “app”)]
(while (.hasChildNodes content)
(.removeChild content (.-lastChild content)))
(.appendChild content (js/document.createTextNode “Welcome to cool-app”))))(defn init! []
(mount-components))
This is where the “Welcome to cool-app” in the body of our web app is coming from. We can change the wording however you’d like, and when you save the file, you should see the change in your browser.
For example, change the line
(.appendChild content (js/document.createTextNode “Welcome to cool-app”))))to the following,
(.appendChild content (js/document.createTextNode “Welcome to my brand new app”))))and watch what happens.
One error you might get is this:
shadow-cljs — Stale Output! Your loaded JS was not produced by the running shadow-cljs instance. Is the watch for this build running?If you know you ran the command for Shadow-cljs, then what might have happened here, is that your browser is using old cookies to display an outdated version of your app. Usually what I do when this happens is just open up an incognito version of the browser and try again there. The updated version usually shows up fine.
What if we want to customize the site title? We can change it in our home.html file and save again. However, we aren’t going to see the change reflected right away.
I’ll walk through it. In the home.htm file that we looked at earlier, I changed the line
<title>Welcome to cool-app</title>to the following:
<title>Welcome to the coolest app</title>and saved the file.
Now, when I look at the website, everything still looks the same, but all I have to do is reload and the site title is updated.
Notice the grey square logo next to the site title? That is your favicon. Let’s update that too. Feel free to pick any image you like, whether it’s a professional logo for your startup or a cute image.
Let’s first look at where the image is located that’s currently showing up. Go to resources/public and you’ll see favicon.ico. Theoretically, we should be able to just replace this with another image of our choosing with the same name and it should be replaced. Let’s try that.
I searched online for cute favicons and I saved one of them as favicon.ico. Next, I renamed the old one as old-favicon.ico, and I dropped the image into the public folder. Let’s see what happens now. Reloading the webpage, it looks like the favicon hasn’t changed. However, if I close the browser and open it to localhost:3000 again, it worked!
Let’s say it doesn’t work: Here is a line of code you can include to get the new favicon showing up. In your home.html file, add a line of code underneath the site title like this:
<link rel=”shortcut icon” type=”image/jpg” href=”/favicon.ico”/>Or put your favicon into the public/css folder and change the location of href:
<link rel=”shortcut icon” type=”image/jpg” href=“/css/favicon.ico”/>and now we have a web app set up. There aren’t any features yet, but we have accomplished some basic customization. Coming up will be content on adding features. Let me know if you have any requests!
