Steal-tools build bundling font-awesome fonts

StealJS
1

It’s me again, another question (sorry).

I’m using steal-tools@1.3.3 to bundle the frontend app. One of the dependencies is font-awesome@4.7.0. This is working fine when using steal to load everything.

It had been working fine in production too, but then I decided that the node_modules directory shouldn’t really be included in the production container. So it turns out that the font-awesome fonts directory is not being added to the production bundle and so the fonts cannot load when the node_modules directory is not present in the container.

My colleague suggested using the bundleAssets option with steal-tools. Once I added this, then I see that steal-tools is trying to add the fonts (i think). I see the following warning.

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, lstat '/opt/wsp/fonts/glyphicons-halflings-regular.eot'

In the code, I am importing the font-awesome css file like this

import 'font-awesome/css/font-awesome.css';

This file references the fonts like this:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),     url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

The fonts directory is installed in

node_modules/font-awesome/fonts

Any ideas? I can work around this by mounting the node_modules/font-awesome/fonts directory in the production container, but this seems wrong and I would like to understand if this is a problem or not.

Cheers

Rob

2

I managed to solve this on my own using the steal-bundler package.

I add this to the build script

bundleAssets(buildResult, {
    infer: false,
    glob: ['node_modules/font-awesome/fonts/*']
});

This has copied the node_modules/font-awesome/fonts files to the dist directory and updated the references in the app.css file (nice).

If there is another more valid solution, then please let me know.

Cheers

Rob

3

Hey @robfoweraker, I think that’s the viable solution, although I’d kinda want to poke around a sample project (or at least see your build script) to see what’s going on.

[Also please ask all the questions, we’re happy to help. :blush:]

4

I will put together a cut down example based on the project and share it somewhere. I’ll be away from work for a few days, so it will be towards the end of next week before I get round to it.

Many thanks

Rob

1 Like
5

Hi @chasen,

I put a sample project up, if you still want to take a look.

https://github.com/rob4acre/can3-steal-docker

We are using docker to manage the build and run the web server. The project should contain all that is needed, the README contains the instructions for getting the frontend running.

Cheers

Rob

6

Hi @robfoweraker, my apologies for not responding sooner. Thanks for posting the sample project!

This is probably a bug with steal-bundler. I filed an issue here: https://github.com/stealjs/steal-bundler/issues/37

7

Hi @chasen
Thanks for taking a look at the sample. I will follow the issue
Cheers
Rob

1 Like