Aurelia CLI - Visual Studio 2017/2019 Tools

[constructor]

Updated 30/03/19 : Click image to watch video.

Update includes:

• A new Visual Studio Aurelia template with no CLI dependency
• Very lightweight and fast
• A few miscellaneous bug fixes

Check the video to see how quickly a basic project can be set up and published. I find using it a breeze and it seems to have great performance.

You can test the extension by on using Visual Studio 2017 and 2019 by getting it from here:

Download Extension now

It is not intended for live use, but for testing.

---

26/03/19 : Click image to watch video.

Update includes:

• Update to be Visual Studio 2019 & Visual Studio 2017 compatible
• Create and save project templates
• Generate new projects from saved templates
• Some refactoring and bug fixes

Based on a post made by @bigopon here. The ability to save a project template, complete with pages and plugins, for later use. Check the video to see an example.

You can test the extension by on using Visual Studio 2017 and 2019 by getting it from here:

Download Extension now

It is not intended for live use, but for testing.

---

** 22/03/19 : Click image to watch video.**

Update includes:

• Updated to use latest CLI
• Fixed all context commands for Babel based template option
• Fixed TypeScript appearing in JavaScript template
• Re-worked wizard to be a single paginated form
• Dependency (plugins) editor added to wizard
• Context command for package.json file to manage dependencies
• Back button in wizard to select different template

I have almost completed implementing another way to add different templates using some of the
‘online template’ approaches I posted about last year. A list of online templates managed externally and available to a new template wizard option in.

It is not intended for live use, but for testing.

---

13/03/19 : Click image to watch video.

Implemented Visual Studio contextual commands and menus for adding items:

• Attribute
• Binding Behavior
• Component
• Element
• Generator
• Navigation Renderer
• Component
• Task
• Value Converter

This makes building out a project even quicker and easier.

It is not intended for live use, but for testing.

---

05/03/19 : Click image to watch video.

• drag and drop site map editing
• show in navigation
• workflow improvements (removed another manual config step)
• reworked generation of files
• a couple of bug fixes

It is not intended for live use, but for testing.

---

Click image to watch video.

• auto configuration for added router-component (pages) and elements
• navigation renderer fix for ordering
• custom site map edit
• workflow and code wrap snippet implementation

It is not intended for live use, but for testing.

---

** Click image to watch video.**
(navigation renderer, custom site map edit, overwrite warning, workflow and code snippet implementation)

It is not intended for live use, but for testing.

---

Click image to watch video.
(site map edit workflow and code snippet implementation)

It is not intended for live use, but for testing.

---

Click image to watch video. (now with routing config and navigation code generation)

---

Click image to watch video.

Recently, I have been working on making the experience of getting up and running in a .NET Core 2.2 Visual Studio environment quickly and simply. There is a short video of early progress below.

This all follows on from previous threads here and here, and some from even longer ago all highlighting similar experiences.

What the video shows is the process of setting up, installing and running an Aurelia CLI project in Visual Studio 2017.

It also shows the generation of project items within Visual Studio. I have to say that I am finding the speed and ease of use really nice so far.

The items included (so far) are: attribute, binding-behavior, component, element, generator, task, value-converter.

The video was recorded on a dual screen so there are times where some elements (such as the installation of dependencies and build process) started on the other screen so I dragged them on screen. There is also a section where I try to au build --watch in the wrong directory, so ignore that…

I also wish to automate the config.globalResources entries, so that adding an element is even easier, along with a few other things.

If anyone has any feedback or ideas then that would be very much appreciated.

If you have time take a look and any feedback or ideas are appreciated.

[bigopon]

It also shows the generation of project items within Visual Studio. I have to say that I am finding the speed and ease of use really nice so far.

Yes, I’d agree very much with this after what I saw in the video. Nicely done

I also wish to automate the config.globalResources entries, so that adding an element is even easier, along with a few other things.

I think it’s the routing/navigation aspect that probably is more needed, but it’s hard to determine the right relative module path if we don’t know the right router module. Though I would say having the bare minimum of setting up routed component would be very nice

[constructor]

I think it’s the routing/navigation aspect that probably is more needed, but it’s hard to determine the right relative module path if we don’t know the right router module. Though I would say having the bare minimum of setting up routed component would be very nice

I will look into this. It would be quite simple to add a default navigation with 2 pages to get things started. I am also looking into the addition of inline snippets that can make things simpler.

[rkever]

Great work @constructor I like that you added file templates too. Will there be auto-refresh available too? I’m not thinking HMR since it has issues but at least a page refresh would be nice. Maybe it’s already there when you run au run --watch? I had created a CLI for adding files, such as components, routed views, etc., and one thing I added to those files were all lifecycle methods available to those VMs (components and routed views). It’s been very helpful for us in that there’s no need to look in the docs to see which lifecycle methods are available for each type (component/route). Is there a link to that tool so we can test it out?

[constructor]

@rkever

I like that you added file templates too. Will there be auto-refresh available too?

I am currently adding inline code snippets (with shortcuts), for which I have routerConfig and observable property working. As for auto-refreshing after update, if it can be added unobtrusively and reliably then it could be added. Personally I prefer pressing refresh to so I can see the console as it happens.

As far as testing the package, I have not made this version it available yet but I can inform you when I do, if would like to test it?

There is also a .NET CLI tool that I have to finish also. There is also VS Code to consider, but I have not even looked into that.

[constructor]

Here is a way to get auto-refresh of all changes (including .html, .css and Aurelia) in Visual Studio 2017 using the inbuilt BrowserLink and MadsKristensen’s ‘BrowserReloadonSave’.

The only change you need to make is to add the following to the Startup.cs :

        if (env.IsDevelopment())
        {
            ...
            app.UseBrowserLink();
        }

I have just tested it and it seems to work perfectly so far.

With this in mind, I do no think it requires anything in the templates, since the functionality is already available.

[constructor]

@bigopon

I think it’s the routing/navigation aspect that probably is more needed, but it’s hard to determine the right relative module path if we don’t know the right router module. Though I would say having the bare minimum of setting up routed component would be very nice

This could work? Providing routing complete with named modules via a wizard during project setup? That could save some time?

[bigopon]

Hang on a minute, this is awesome !

[constructor]

I blame you… It started as an innocent comment on discourse… now it is growing into something else. It is only part done.

Any other ideas where this sort of automation could be useful?

[bigopon]

I rarely needed more than that during my app development, I guess we will need input from different folks. After this, just a general readme with some tips & tricks for debugging generated together with the project and it’s

[EisenbergEffect]

Wow! @constructor This is amazing work. Very exciting stuff!

[constructor]

I have posted a new video showing new routing and module generation for Aurelia CLI projects generated in Visual Studio. There is also a download link. Check the first post above.

[constructor]

@bigopon

Hang on a minute, this is awesome !

If you have the time, you can take a look at the routing generation and try for yourself.

[clmorales]

This is something wonderful. Great job. This would definitely save a lot of work.

[constructor]

Thank you
Please, if you can, post any feedback or issues if you get the time to do so.

[constructor]

I have updated with these changes:

• Added inline snippets for both TypeScript and JavaScript
• Changed workflow to enable changing of sitemap
• A few bug fixes

Still much more to do, but I will update soon. See above post for download and info.

[bigopon]

Very nice. It seems to me router part is already nice, just one missing feature for scaffolding child routes.

[constructor]

Already working on it
Along with rendering of navigation in hierarchical lists (HTML), and also implementing boolean ‘show in navigation’.
Also got mobile app template generation work in progress.
Also got token based authentication work in progress.

[bigopon]

wow, that’s a lot Very nice!!

[constructor]

There are a few more items I have on the list.
You gave some good advice a few days ago (about routing), any other features you think need looking at?