Stage/prod different favicons, howto?

help
1

Seems like a simple thing:

I want a blue icon for my production deployment, and a green one for “stage”.

The icon is in /public/favicon.ico. I’m deploying with mupx and have a setting in settings.json.

How do I copy /public/favicon-stage.ico to /public/favicon.ico at server startup? Or is there a better way?

Thanks!

Mike

2

Instead of handling this at runtime, I’d recommend handling it at deployment time. Wrap your mupx deploy command in a shell script that first copies the proper favicon.ico into place. Something like:

#!/bin/bash
cp ./public/favicon-stage.ico ./public/favicon.ico
mupx deploy --config=mup-staging.json

Save this as deploy-stage.sh then run it for your staging deployments as ./deploy-stage.sh (you could then expand on this to handle production as well).

1 Like
3

Hi @hwillson,

Thanks, I tried that out, but ran into this:

  1. Developing app and run server - switch to dev icon
  2. Deploy the app - switch to stage icon
  3. Dev instance is watching and rebuilds with stage icon.

Since the reason to do this is to know your not messing up a “production” instance, misinformation is worse than no information.

Is there a way to do this with: registerBuildPlugin()? I poked around github for some examples, but didn’t find anything complete…

FYI, cross-posted here

4

Why do it so “complicated”?

Just use NODE_ENV to detect what environment should run and use e.g. env-settings package to handle two different fav-icon links or whatever.

Have a look at http://docs.meteor.com/#/full/meteor_settings or checkout our package https://atmospherejs.com/4commerce/env-settings

Should be easy to handle favicon-prod.ico and favicon-dev.ico

5

It needs to be just complicated enough to work.

Env-settings is an interesting package, but I don’t see how it adjusts the favicon.ico. How to you affect the favicon with it?

Modern browsers make a GET /favicon.ico on sites they visit. That request is served statically from the /public folder.

So I need to either change the file in /public or change the static file server. Do you know how to do that?

Mike

6

Normal browsers are looking for CSS link rel=“icon” entries to locate your favicon image

<link rel="icon" type="image/png" href="/my-icon.png">

So with that you may use

<link rel="icon" type="image/png" href="{{Meteor.settings.public.favicon}}">

Have not tested but give it a try.

Tom

1 Like
7

@tomfreudenberg Hmmm… It appears {head> isn’t a template, so variables can’t be used. I get this in the main doc:

https://dev.example.com/%7B%7Bsettings%20\'favicon\'%7D%7D-16x16.png?v=2

So, I think changing the request is off the table. That leaves changing the file, or changing the response.

8

Right, but can’t you just switch the icon back after deploying as part of the shell script? Maybe I’m not fully understanding your setup/environment, but what about:

#!/bin/bash
cp ./public/favicon-stage.ico ./public/favicon.ico
mupx deploy --config=mup-staging.json
cp ./public/favicon-prod.ico ./public/favicon.ico

Or something similar (sure DEV might be toggled for a few seconds, but it will be switched back when the deploy is done)?

9

@hwilson, yes, that’ll work great. I passed it over without really thinking about it. Thanks for pointing it out :slight_smile:

10

Just one for the ENV - why not changing some color / text / icon inside your navbar or screen to show up DEV or PROD state and just leave the icon untouched? Just my 2cents.