ASP Net Core 3.0 SPA with Aurelia - no Bootstrap at Components

Help Requests
1

Hello Community

I’ve a Problem to set up my new Aurelia Project.

  1. I try to get the Standard AspNetCore Spa with Aurelia via dotnet-cli “dotnet new aurelia”
  2. “npm install”
  3. now i got the base Project and can run the Project, but when i try to Change, for example, the “home.html” and write some bootstrap classes(classnames: d-flex,border,etc.) in it, it will have no Impact.

I use:

  • dotnet-cli 3.0.101
  • AspNetCore 3.0
  • Aurelia
  • Bootstrap 4.0.0 beta3
  • Webpack

package.json:

“devDependencies”: {
“@types/webpack-env”: “^1.13.0”,
“aspnet-webpack”: “^2.0.1”,
“aurelia-bootstrapper”: “^2.0.1”,
“aurelia-fetch-client”: “^1.0.1”,
“aurelia-framework”: “^1.1.0”,
“aurelia-loader-webpack”: “^2.0.0”,
“aurelia-pal”: “^1.3.0”,
“aurelia-router”: “^1.2.1”,
“aurelia-webpack-plugin”: “^2.0.0-rc.2”,
“bootstrap”: “^4.0.0-beta.3”,
“css-loader”: “^0.28.0”,
“extract-text-webpack-plugin”: “^2.1.0”,
“file-loader”: “^0.11.1”,
“html-loader”: “^0.4.5”,
“isomorphic-fetch”: “^2.2.1”,
“jquery”: “^3.4.1”,
“json-loader”: “^0.5.4”,
“style-loader”: “^0.16.1”,
“ts-loader”: “^2.0.3”,
“typescript”: “^2.2.2”,
“url-loader”: “^0.5.8”,
“webpack”: “^2.3.3”,
“webpack-hot-middleware”: “^2.18.0”
},
“dependencies”: {
“popper.js”: “^1.16.0”
}

Webpack:

const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'app': 'aurelia-bootstrapper' },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['ClientApp', 'node_modules'],
        },
        output: {
            path: path.resolve(bundleOutputDir),
            publicPath: 'dist/',
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
                { test: /\.html$/i, use: 'html-loader' },
                { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new AureliaPlugin({ aureliaApp: 'boot' })
        ].concat(isDevBuild ? [
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
            })
        ] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    }];
}

Is the base Project wrong?
I tried to change the webpack like that link here! But no success…
(Forum Link)

I have already reviewed several other forums, unfortunately I have no current topic or read this case anywhere! Can someone help me?

1 Like
2

Here is a template with bootstrap in place

3 Likes
3

Thank you Maxim :grinning:

1 Like