Suggestion: Switch back to self hosted assets

[momente-organisieren]

As Sendportal is a modern open-source self-hosted email marketing tool, it would feel naturaual to not load assets from CDNS as those would ping pack the IP and the URL of the instance to third party Organsiations and other 7-reasons-not-to-use-a-cdn add to such the opinion / motivation to do so.

A individual that evaluates sendportal for the implementation would (possibly) be grateful to have the option 'out of box' to control asset loading.

Would you and the community be interested in a PR that handles the third-party js and css assets to be self hosted?

Suggested solution

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "@fortawesome/fontawesome-free": "^5.13.0",
        "bootstrap": "^4.4.1",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.6",
        "popper.js": "^1.16",
        "postcss": "^8.2.13",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "@fontsource/nunito": "^4.2.2",
        "chart.js": "^2.9.3"
    },
    "dependencies": {}
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .extract(['jquery', 'bootstrap', 'popper.js']);
mix.copy('node_modules/chart.js/dist/Chart.js', 'public/js/chart.js');
mix.sass('resources/sass/app.scss', 'public/css');

app.scss

// Fonts
// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

// Nunito Font
@import "~@fontsource/nunito/latin-300.css";
@import "~@fontsource/nunito/latin-300-italic.css";
@import "~@fontsource/nunito/latin-400.css";
@import "~@fontsource/nunito/latin-400-italic.css";
@import "~@fontsource/nunito/latin-600.css";
@import "~@fontsource/nunito/latin-600-italic.css";
@import "~@fontsource/nunito/latin-700.css";
@import "~@fontsource/nunito/latin-700-italic.css";

// Variables
@import 'variables';
@import 'utilities.scss';
@import 'typography.scss';
@import 'borders';
@import 'forms.scss';
@import 'buttons.scss';
@import 'pages.scss';
@import 'modals.scss';
@import 'tables.scss';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

(...)

blade.php

<!---css-->
<link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">

<!--js-->
<script src="{{asset(mix('js/manifest.js'))}}"></script>
<script src="{{asset(mix('js/vendor.js'))}}"></script>
<script src="{{asset(mix('js/app.js'))}}"></script>

<!--chartjs only where needed (e.g. dasboard) -->
@push('js')
    <script src="{{asset(mix('js/chart.js'))}}"></script>
   (...)
@endpush