Add favicons and other media in file system

Glitch Feedback
1

So while the normal assets feature works great for content icons often have to be placed relative to the normal URL (an example would be the favicon). This seems to be in place at least technically as projects generated with create-react-app (example https://react-app-github-pages.glitch.me/) do have a custom favicon.

2

https://glitch.com/edit/#!/react-app-github-pages index.html has <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> which allows the favicon to be placed anywhere (including a different domain), rather than at the root of the current domain. Would that solution work for you?

1 Like
3

Well the build wouldn’t work then I guess. I will find a solution (probably I’ll just upload one to GitHub) but saving assets inside the original project is definitely a feature I’d like to see in the future.

5

I don’t understand what you mean by “the build wouldn’t work.” Can you help me understand what’s not working?

6

Sure.

If I publish the following app (a default create-react-app) to GitHub Pages I want to have a favicon.ico image inside the public folder so when I build it (npm build) it gets moved to the root of the build folder.

This should be the end result.

This app works so far because it was create with create-react-app so a favicon is added to the public directory from the start. However as things are right now I can’t edit it.

7

Hi Spreadyy,

We don’t currenty have a direct way to upload files directly to your app’s filesystem yet, but we do have a couple indirect ways.

One way would be to have a temporary endpoint in your app that when hit downloads the favicon to your apps local filesystem. The filesystem is persistent so anything written from the app. You could use something like:

...
var http = require('http');
var fs = require('fs');

app.get('/download-favicon', function(req, res) {
  var file = fs.createWriteStream("favicon.ico");
  var request = http.get("http://my-cool-favicon.com/favicon.ico", function(response) {
    response.pipe(file);
  });
  res.send('ok')
});

Then you can remove the route after you download the favicon.

We also provide a SuperSecret :tm: terminal you can connect to in your app. From your web browser’s developer console type application.console() and it will transport you to an ssh like shell where you can move files around inside your app’s filesystem using existing unix tools. This feature is still experimental, but should work well for your needs. Hope this helps!

1 Like