Pull Bulma, FontAwesome and OpenSans locally

[rabejens]

Currently, the SAFE template loads Bulma, FontAwesome and OpenSans from the web. This is problematic in many cases, i.e., when the application is to run in an environment without access to the Internet, or in the EU, for GDPR reasons.

There should be an option to pull these dependencies in locally, i.e. via yarn.

[isaacabraham]

What's the cost of just doing this all the time? I suppose an increase in bundle size?

[rabejens]

Yes, it inflates the bundle a fair share and makes compilation take longer, but as I said, I want to use the SAFE stack in some in-house web apps, which run on internal servers not connected to the internet, so I have to package everything locally.

If this is not wanted, here is how I did it, should anyone have the same issue:

I basically adapted html-to-elmish by @MangelMaxime - Repository

1. Add the dependencies

yarn add --dev @fortawesome/fontawesome-free
yarn add --dev file-loader
yarn add bulma@0.7.1
yarn add open-sans-fonts

2. Remove the imports in index.html
3. Adjust style.scss:

@charset "utf-8";

// FontAwesome
$fa_font_path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

// OpenSans
$FontPathOpenSans: "~open-sans-fonts/open-sans";
@import '~open-sans-fonts/open-sans';
body {
  font-family: 'Open Sans' !important;
}

// Bulma
@import "~bulma/bulma";

4. Re-run fake build -t Run (or the other targets)

If bundle size is an issue, this should not be the default, but it could be an option, like dotnet new SAFE --bulma local --fontawesome local --opensans local

[MangelMaxime]

What's the cost of just doing this all the time? I suppose an increase in bundle size?

Yes and no.

The bundle.js will not change because it contains only the JavaScript code but you will have a new file mystyle.css to load instead of using the CDN.

For your application, it will be the same because it doesn't care if you are loading Bulma from a CDN or from your server.

However, using your own version means you can customize everything.

For example, if you want to change the primary colour in Bulma using scss you can just do $primary: red; and that's it.

If you do it using a CDN version, then you have to manually override each component of Bulma:

.navbaris-primary {
    background-color: red;
}

.button.is-primary {
    background-color: red;
}

// etc.
// And you also need to update manually the derived values etc.

Using a CDN make sense if you don't want to customize Bulma (which probably never happen ^^). Or don't want to write your own components using Bulma variables etc.

[MangelMaxime]

Another remark is that by using a local version of Bulma you can import only the feature you need and so decrease overall size loaded by your application.

You can also run it against an autoprefixer which will take care for you to make your CSS works across all the browsers (it similar to what Babel does for example).

[isaacabraham]

All in favour of moving over to including the CSS locally please thumbs up this comment :-)

[theimowski]

Yup seems pros outweigh cons - @rabejens happy to contribute?
I think we don't need that to be an option

[rabejens]

I am currently looking into it.

[theimowski]

closed by #286