Admin Templates for Aurelia

Hello;
I am from Angular 2 and would like to move to Aurelia. The problem I am facing is that I cant find any Admin Templates that support Aurelia framework.
Kindly would like to know if there is any Asmin Template for Aurelia.
I am using AdminLte.

Not sure if this is helpful, but you can give it a look.

Check out CoreUI. They don’t list Aurelia on their homepage, but the github repo has an aurelia template in a subdirectory here.

You should be able to use it with components from https://aurelia-toolbelt.github.io/.

Hey @shahabganji and @HamedFathi, perhaps someone in the Aurelia community could put together a basic admin template that uses the components from https://aurelia-toolbelt.github.io/ as a demo.

2 Likes

@dannyweldon

Like you, we have this idea too.
But

  1. we are working on first npm package release now. aurelia-toolbelt works with fusebox perfectly but needs some config for webpack and requirejs.

  2. Afterwards, we should write some components for this goal like metis menu , …

Anyway, if anyone volunteers for this, we are ready to help. but eventually, this will happen. :wink: :smile:

1 Like

As @HamedFathi mentioned, we are planning for more components and a basic template admin in which all toolbelt components are used, also worthy to note that we still have more undocumented components, value-converters, custom-attributes and so within the toolbelt; hitherto, we faced many difficulties configuring the aurelia-toolbelt components to work properly with all major bundlers available, we succeed in some and failed in others. For instance, the plugin works just perfect when using fues-box-aurelia-loader, but when it comes to webpack, we have some problems with jquery in SPA Templates of aspnet core, or the CSS files used within the plugin that not being added to the bundles in the configuration of webpack provided by Aurelia CLI, Aurelia CLI requireJS has its own story too. We find some temporary workarounds, and I am talking to @jods4 to help in the webpack scenario so I am to upload a repo to reproduce some of the problems.

Anyway, you can find a NOT-YET-READY-To-USE starter kit here. Honestly speaking, our major focus is on webpack and fusebox; when the majority of problems in these two bundlers solved we will release a working npm package and will focus on the Admin template, the sooner the better but it requires more time if the two of us want to handle everything, that’s why we appreciate other community members to play a role.

Regards,
Shahab

2 Likes

Thanks Bro.
I have come across all those articles. However I am not that skilled to play much with those JavaScript Technicalities.
It is a bit disappointing with Aurelia. Why is it that the JavaScript community does not give it a look although it s easy and beautyful. You don’t see even a mention among the template makers.
And there is a lack of sharing spirit within Aurelia community. For example you hear of people who have already succeeded in integrating the templates such as AdminLte but seems likely that they are not ready to give to the community.
I really hate Angular but the current situation in Aurelia makes it harder for me to move.
The navigation skeleton template is not a match for AdminLte or CoreUI…etc.
Please Lets share and make the platform developer friendly.

1 Like

You are right. This is a problem. But everyone is trying to improve the experience with Aurelia. Precisely because of this problem is I and @shahabganji created AureliaToolbelt. Aurelia needs some time.If you see my posts I have your problem too. Eventually, we decided to do ourselves.
Even with these conditions, Aurelia is more acceptable and better than other competitors.

Shukran Hamed. It is encouraging to hear that.

1 Like

Hi Danny;
Have you been able to use the Core UI template with typescript? (Using Aurelia)

Have you been able to use the Core UI template with typescript? (Using Aurelia)

I have not tried it with typescript, but can’t see why it wouldn’t work.

Has anyone got AureliaToolbelt to work with webpack 4 (Aurelia CLI)?
I have made a small test project but get webpack build errors, it works without AureliaToolbelt:
Aurelia_Toolbelt_Webpack4
Cmd: au build

I know it works with older webpack:
aut-webpack-starter-kit

2 Likes

I’ll take a look at webpack4 and how we should configure its config to make aurelia-toolbelt to work with that on Friday, is that OK?

1 Like

That would be great if you could take a look at it!
Thanks @shahabganji

1 Like

Hey @viewpit

I’ve created another starter kit here that you can take a look and works just fine, I hope :smile:

I made some changes in the default template that au new --here command created:

  1. removed the JSON loader owing to the reasons described in here, here and here.
  2. Since bootstrap part of the aurelia-toolbelt depends on jquery, I used expose-loader and also add jquery to ProvidePlugin
  3. I used SplitChunksPlugin because I thought that we need code splitting and I have split codes at entry part into three categories: app, vendor and aurelia-toolbelt. The aurelia-toolbelt part is due to this

I would be grateful if you test this too and provide me with your feedback so that I could announce other developers too :pray:

1 Like

I also made a pull request for your sample

Thanks @shahabganji,

I have tested WebPack4 starter kit, it works fine.
Had some minor issues when hitting the URL in browser "ConcurrentCompilationError: You ran Webpack twice."

But after I ran the dotnet restore, au build and au run --watch everything worked.
dotnet run works fine too.

On the other hand, au build --env prod do not work.
I wanted to check the size of the releas files, got this error message:
Error: Path variable [contenthash] not implemented in this context: [contenthash] .cs

Thanks for the pull request, I’ll test the changes!

2 Likes

I’ll check that too, but I’m a little busy, it might take time :see_no_evil: :smile:

Thanks for the feedback

1 Like

Now my Aurelia_Toolbelt_Webpack4 template works in release too (au --env prod), thanks @shahabganji!

There was the wrong path to font awesome in webpack.config.js and it was missing toastr.css, but only in release.
The release was published with Visual Studio 2017 to local IIS for testing.

2 Likes

Hey @viewpit, have you tested the release on IIS?

And can you make a pull request for the starter kit I have mentioned above?