Uutiset

Adafyn kuulumisia

Aurelia and UWP – Part 1: Getting Started

<p><a href="http://mikaelkoskinen.net/posts/files/7f6b87ec-8e50-48a1-a234-901d05f51350.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;float:right;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/294ee938-57ca-4938-8a60-c93048c616a7.png" width="441" align="right" height="335" /></a>Lately <a href="https://adafy.com/">we’ve</a> been writing some apps using <a href="http://aurelia.io/">Aurelia</a>. Aurelia isn’t the only Javascript framework out there but it’s easily the most productive we have encountered. For someone who has been writing XAML/C# apps for the last seven years or so, Aurelia is the first platform which gives us the same kind of a feeling of productivity as the XAML/C#.</p><p>Some of the apps we’ve been building have been such that it would be great if we could release them to the Windows Store. Here’s a step-by-step tutorial on how to package the Aurelia app as an UWP app.</p><h3>Requirements</h3><p>Before starting, make sure that you have aurelia-cli up and running. For sample app we can use Aurelia’s “official” todo example app. You can <a href="https://github.com/aurelia/app-contacts">get it from GitHub</a>.</p><h3>1. Create new UWP app</h3><p>First, let’s create a new UWP app using the “Blank App (Universal Windows)” template:</p><p><a href="http://mikaelkoskinen.net/posts/files/c4f09f9b-63e6-48ed-a82c-0a1846400287.png"><img title="image" style="border-left-width:0;border-right-width:0;background-image:none;border-bottom-width:0;padding-top:0;padding-left:0;display:inline;padding-right:0;border-top-width:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/c824d4f1-b198-496f-b563-db7e6aa7d617.png" width="439" height="368" /></a></p><h3>2. Copy the Aurelia app inside the UWP app’s folder</h3><p>Now get your Aurelia app or the todo-example app and copy its source code inside the UWP app’s root folder. This should override the default index.html and your folder should now look like the following:</p><p><a href="http://mikaelkoskinen.net/posts/files/60b72da0-3b65-4522-8b25-24fc756e68be.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/6b726d70-161f-4927-9447-9be4c2b07e6a.png" width="396" height="423" /></a></p><h3>3. Build Aurelia app</h3><p>Next step is to build the Aurelia app. If you’ve just copied the example app from GitHub, you must first install its dependencies:</p><blockquote><p>npm install</p></blockquote><p>When you have the dependencies installed, build the app using aurelia-cli:</p><blockquote><p>au build</p></blockquote><p><a href="http://mikaelkoskinen.net/posts/files/b3216e4a-f348-4e92-9cc9-ac44d8287380.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/414db4d3-25bb-4f24-a1b2-a7847a19ea1c.png" width="306" height="205" /></a></p><h3>4. Include required files in Visual Studio</h3><p>Last step is to include the required files using Visual Studio. Select “scripts” folder and “Include in project”:</p><p><a href="http://mikaelkoskinen.net/posts/files/18db849f-c691-49f6-be05-61477d1edbdd.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/30f5a074-f4d9-4f13-967e-cc528619e97b.png" width="314" height="246" /></a></p><p>And you’re all set! Just use F5 to run the app:</p><p><a href="http://mikaelkoskinen.net/posts/files/3a5f6813-a0ca-41a4-bc07-1286d013dd6a.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/ebe084e5-faef-405d-8164-72f1ff1fcafe.png" width="448" height="165" /></a></p><h3>Conclusion</h3><p>This tutorial showed you how to “port” Aurelia app to an UWP app.</p><p>The source code is available from <a href="https://github.com/mikoskinen/aurelia-uwp/">GitHub</a>.</p><p>When you start using the app, you’ll quite likely notice a big problem quickly: There’s no back-button. The part 2 of this series shows how you can add the standard back-button, allowing desktop users to navigate back in your Aurelia app.</p>