Giter VIP home page Giter VIP logo

aureliadotnettemplate's Introduction

Aurelia .Net Template

This project has picked up where the official Microsoft Aurelia template left. It's got more clear webpack configuration and latest Aurelia and Bootstrap packages. Those interested in Materialize instead of Bootstrap please proceed to Aurelia .Net Materialize Template.

Basically, there are two coexisting applications in this template - one is Asp.Net Core Web Api which additionaly serves local files and the second one is an Aurelia app. Previously, the template used Asp.Net Spa Services to start a webpack dev server for development. This does not happen anymore. Why? It is causing a webpack rebuild each time you recompile C# code (trust me, it IS SLOW on a decent sized project), which is not practical when Api and UI are developed in parallel.

Instead, when developing UI, just run npm run webpack:watch in the background. The Asp.Net Core FileServer middleware will serve the fresh files when you refresh the browser. Yes, this means no HMR, but, honestly, it does not work more often than it does, especially when ValidationController is injected into an Aurelia view.

The template is obviously opinionated but always open to suggestions and PRs.

aureliadotnettemplate's People

Contributors

elmt1 avatar hamedfathi avatar maximbalaganskiy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

aureliadotnettemplate's Issues

Fail loading required css file: app/components/app/app.scss

After Checkout and npm -i I startet the template in vs.
But I get an error in the browser console...

Uncaught (in promise) Error: Failed loading required CSS file: app/components/app/app.scss
    at fixupCSSUrls (aurelia-templating-resources.js:1398)
    at aurelia-templating-resources.js:1432
    at async Promise.all (:44345/index 0)
    at async Promise.all (:44345/index 1)

Any help?

There is a better way to do this, I believe

Hi, @MaximBalaganskiy

You may or may not be aware of the AUCS project that started with a lot of enthusiasm, 25 people stated their intent to collaborate, but then got deflated for many reasons that I do not want to share in such public way.

I created a new organization - longarone which should deliver on AUCS promises. The difference is in my approach: instead of asking people to spend the time on creating the necessary tooling, build environment for both code and guides, I am doing all that myself. At the moment, I do have a few things to show - see :

  • all basic samples are created by CLI build tooling.
  • the sample you call AureliaDotNet Template fits better in the full stack collection, where the app is built as two separated projects (one with Aurelia CLI and the other with dotnet CLI). Such model will allow us to illustrate the development of the more complex full stack applications, so this skeleton and its "cousins" serve as introduction in more complex applications - see this for more information

Not all samples are finished or properly documented, so I am only trying to get you interested to participate in Longarone, rather than the "we all do our own stuff" effort.

If you want to find out more, please ask ๐Ÿ˜„

Getting an error on Boot.ts

On the off chance you are watching this I am getting the following error in the console:

TypeError: Cannot read property 'href' of undefined at boot.ts:35 at HttpClient.push../node_modules/aurelia-fetch-client/dist/native-modules/aurelia-fetch-client.js.HttpClient.configure (aurelia-fetch-client.js:160) at Module.configure (boot.ts:34) at aurelia-bootstrapper.js:128

in which is failing on this line in boot.ts

new HttpClient().configure(config => { const baseUrl = document.getElementsByTagName("base")[0].href; config.withBaseUrl(baseUrl); });

This was commented out in the template but worked in the old version for me.. any chance you might know the reason for the error? Regards Simon

Adding i18n

Hello,

I tried to add aurelia-i18n and I have a problem with webpack, I followed the documentation, and everything works fine except when I edit a file that trigger the webpack watch.

When I launch the first time, my translation.json are copied to a locales folder inside the dist but when the watch triggers it remove the translation.json without re-copying them.

Here is how I configured the locales copy:

plugins: [
	new CleanWebpackPlugin(),
	new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
	new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
	new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
	new AureliaPlugin({ aureliaApp: "boot" }),
	new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
	new ModuleDependenciesPlugin({}),
	new MiniCssExtractPlugin({
		filename: "[name].[hash].css",
		chunkFilename: "[name].[chunkhash].css"
	}),
	new CopyWebpackPlugin([
		{ from: 'ClientApp/app/locales/', to: 'locales/' }
	]),
],

I don't know why the CopyWebpackPlugin don't trigger when the watch is called. Do you have any idea why ?

Thanks.

Add aurelia-toolbelt prevents bootstrapping the app

Hi @MaximBalaganskiy ,

I forked your repository and just added the aurelia-toolbelt package to it, however, one way or the other it has an error at bootstrapping the Aurelia app.

image

I have just added this line to the boot.ts file

aurelia.use.standardConfiguration()
	.plugin(PLATFORM.moduleName("aurelia-toolbelt"));

Can you take a look at this problem, or give me some hints?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.