From 12d4f3047bd767feec23421dfc4a162abf83ac8c Mon Sep 17 00:00:00 2001 From: Wilan Bigay Date: Wed, 1 Jun 2016 10:07:21 +1000 Subject: [PATCH 1/4] Modified readme up to setting up of asp.net --- README.md | 90 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index ddd3368..37cbb48 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,71 @@ -# Welcome to ASP.NET Core +# ASP.NET Core Skeleton with Aurelia and TypeScript -We've made some big updates in this release, so it’s **important** that you spend a few minutes to learn what’s new. +Contains a stock setup of ASP.NET Core RC2 WebAPI with basic Aurelia and Typescript. -You've created a new ASP.NET Core project. [Learn what's new](https://go.microsoft.com/fwlink/?LinkId=518016) +This is take from the blog of [@sujesharuki](https://twitter.com/sujesharukil). Please read his [article](http://www.sujesharukil.com/blog-native/2015/12/30/creating-an-aurelia-project-with-visual-studio-code-and-typescript-from-scratch). ## This application consists of: * Sample pages using ASP.NET Core MVC -* [Gulp](https://go.microsoft.com/fwlink/?LinkId=518007) and [Bower](https://go.microsoft.com/fwlink/?LinkId=518004) for managing client-side libraries -* Theming using [Bootstrap](https://go.microsoft.com/fwlink/?LinkID=398939) +* [Aurelia](http://aurelia.io/) for front end SPA framework +* [Gulp](https://go.microsoft.com/fwlink/?LinkId=518007) for managing client-side libraries +* [Typescript]() for compiling typescript -## How to +## Setting up this project -* [Add a Controller and View](https://go.microsoft.com/fwlink/?LinkID=398600) -* [Add an appsetting in config and access it in app.](https://go.microsoft.com/fwlink/?LinkID=699562) -* [Manage User Secrets using Secret Manager.](https://go.microsoft.com/fwlink/?LinkId=699315) -* [Use logging to log a message.](https://go.microsoft.com/fwlink/?LinkId=699316) -* [Add packages using NuGet.](https://go.microsoft.com/fwlink/?LinkId=699317) -* [Add client packages using Bower.](https://go.microsoft.com/fwlink/?LinkId=699318) -* [Target development, staging or production environment.](https://go.microsoft.com/fwlink/?LinkId=699319) +### Prerequesites +The following must already be installed on your system +* [NodeJS](https://nodejs.org) and [npm](https://www.npmjs.com/) +* [Asp.Net 5](https://get.asp.net/) +* [Visual Studio Code](https://code.visualstudio.com/) +* [Yeoman](http://yeoman.io/) and [Yeoman ASP.NET Generator](https://github.com/OmniSharp/generator-aspnet) +* [jspm](http://jspm.io/) -## Overview +### Create Web API Application Project +``` +$ yo aspnet +``` +Choose WebAPI fpr the type of project and type the project name. In this case let's name our project MyProject -* [Conceptual overview of what is ASP.NET Core](https://go.microsoft.com/fwlink/?LinkId=518008) -* [Fundamentals of ASP.NET Core such as Startup and middleware.](https://go.microsoft.com/fwlink/?LinkId=699320) -* [Working with Data](https://go.microsoft.com/fwlink/?LinkId=398602) -* [Security](https://go.microsoft.com/fwlink/?LinkId=398603) -* [Client side development](https://go.microsoft.com/fwlink/?LinkID=699321) -* [Develop on different platforms](https://go.microsoft.com/fwlink/?LinkID=699322) -* [Read more on the documentation site](https://go.microsoft.com/fwlink/?LinkID=699323) +### Go inside the project folder and download the nuget packages and build the project +``` +$ cd MyProject +$ dotnet restore +$ dotnet build +``` +If you want to see it running, do +``` +$ dotnet run +``` +### Create src, build and test folders. +The src folder is where the front end assets resides. The build folder will contain the build articfacts and test folder will contain the test scripts. -## Run & Deploy +``` +$ mkdir src +$ mkdir build +$ mkdir test +``` -* [Run your app](https://go.microsoft.com/fwlink/?LinkID=517851) -* [Run tools such as EF migrations and more](https://go.microsoft.com/fwlink/?LinkID=517853) -* [Publish to Microsoft Azure Web Apps](https://go.microsoft.com/fwlink/?LinkID=398609) +### Create the default page inside wwwroot +``` +$ cd wwwroot +$ yo aspnet:HTMLPage index +$ cd .. +``` +This will create the index.html page with a welcome message. You won't still be able to see this page until you complete the next section -We would love to hear your [feedback](https://go.microsoft.com/fwlink/?LinkId=518015) - -# Aurelia setup -This also serves as my skeleton setup for Aurelia using Typescript - -## Source -* [http://www.sujesharukil.com/blog-native/2015/12/30/creating-an-aurelia-project-with-visual-studio-code-and-typescript-from-scratch](http://www.sujesharukil.com/blog-native/2015/12/30/creating-an-aurelia-project-with-visual-studio-code-and-typescript-from-scratch) \ No newline at end of file +### Configuring the application to use static files +Open VSCode by typing +``` +code . +``` +Open project.json file and add the following like in the list of packages +```javascript +"Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final" +``` +Open Startup.cs and add the following lines in the configure method +``` +app.UseDefaultFiles(); +app.UseStaticFiles(); +``` +Now run the application and go to http://localhost:5000 and see index.html loaded. You may want to edit index.html and put something to see it working. From 62e4e926f9627a95fa8459323265d74848c18a0a Mon Sep 17 00:00:00 2001 From: Wilan Bigay Date: Wed, 1 Jun 2016 10:55:32 +1000 Subject: [PATCH 2/4] Readme up to app.html now --- README.md | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 129 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 37cbb48..57e855f 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,14 @@ This is take from the blog of [@sujesharuki](https://twitter.com/sujesharukil). ## Setting up this project ### Prerequesites -The following must already be installed on your system +The following must already be installed globally on your system * [NodeJS](https://nodejs.org) and [npm](https://www.npmjs.com/) * [Asp.Net 5](https://get.asp.net/) * [Visual Studio Code](https://code.visualstudio.com/) * [Yeoman](http://yeoman.io/) and [Yeoman ASP.NET Generator](https://github.com/OmniSharp/generator-aspnet) * [jspm](http://jspm.io/) +* [Gulp](http://gulpjs.com/) +* [tsd](https://github.com/DefinitelyTyped/tsd) ### Create Web API Application Project ``` @@ -69,3 +71,129 @@ app.UseDefaultFiles(); app.UseStaticFiles(); ``` Now run the application and go to http://localhost:5000 and see index.html loaded. You may want to edit index.html and put something to see it working. + +### Create project.json file +``` +$ yo aspnet:PackageJson +``` + +### Install jspm, gulp and tsd locally as saved dependencies +``` +$ npm install jspm gulp tsd --save-dev +``` + +### Initialize tsd. +TSD is a package manager to search and install TypeScript definition files directly from the community driven DefinitelyTyped repository. +``` +$ tsd init +``` + +### Create typescript configuration file +``` +$ yo aspnet:TypeScriptConfig +``` +This will create tsconfig.json. Open this file in VSCode and replace its contents with +```javascript +{ + "compilerOptions": { + "noImplicitAny": false, + "noEmitOnError": true, + "removeComments": false, + "sourceMap": true, + "target": "es5", + "module": "amd", + "emitDecoratorMetadata": true, + "experimentalDecorators": true + } +} +``` + +### Create the gulpfile +``` +$ yo aspnet:Gulpfile +``` +This will create gulpfile.js + +### Initialize jspm inside of wwwroot +Enter "./wwwroot" for the second question and "no" to the transpiler. Leave the rest to its defaults. +``` +$ cd wwwroot +$ jspm init +$ cd .. +``` + +### Install type definitions for +``` +$ tsd install systemjs gulp --save +$ tsd install node gulp-plumber gulp-changed gulp-typescript gulp-sourcemaps typescript core-js --save +``` + +### Install Aurelia dependencies +``` +$ jspm install aurelia-framework aurelia-bootstrapper aurelia-history-browser aurelia-loader-default aurelia-logging-console aurelia-router aurelia-templating-binding aurelia-templating-resources aurelia-templating-router +``` + +### Install bootstrap and font-awesome +``` +$ jspm install bootstrap font-awesome +``` + +### Modify index.html +Let's modify index.html so that it will load the scripts. Open index.html in VSCode and replace the contents with the following +```html + + + + + Aspnet Demo + + + + + + + +
+
Loading
+ +
+ + + + + + +``` + +### Creating the App class and html +By default convention, the Aurelia bootstrapper will look for App class so let's create that. +Inside the src folder create a file called "app.ts" and "app.html". +Open app.ts and replace its content with the code: +```typescript +export class App { + firstName: string = ""; + lastName: string = ""; +} +``` +Open app.html and replace its content with the code: +```html + +``` \ No newline at end of file From ee55ebe77991db0a6a88efc3520ad3e37958c1a2 Mon Sep 17 00:00:00 2001 From: Wilan Bigay Date: Wed, 1 Jun 2016 12:06:01 +1000 Subject: [PATCH 3/4] Added build system in readme --- README.md | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 120 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 57e855f..1d55b10 100644 --- a/README.md +++ b/README.md @@ -196,4 +196,123 @@ Open app.html and replace its content with the code: -``` \ No newline at end of file +``` + +### Setup the build process +It's now time to build our project. + +Back in VSCode, create a new file called "paths.js" and put the code below. This file contains the paths of all our source files and where the destination folder is. This is the key to our gulp build process. +```javascript +var appRoot = 'src/'; +var outputRoot = 'wwwroot/dist/'; + +module.exports = { + root: appRoot, + source: appRoot + '**/*.ts', + html: appRoot + '**/*.html', + css: appRoot + '**/*.css', + output: outputRoot, + dtsSrc: [ + 'typings/**/*.ts', + './wwwroot/jspm_packages/**/*.d.ts' + ] +} +``` + +Now, create a folder with the name "tasks" and then add a file called "build.js" with the following code +```javascript +var gulp = require("gulp"); +var paths = require("../paths"); +var plumber = require("gulp-plumber"); +var changed = require("gulp-changed"); +var typescript = require("gulp-typescript"); +var tsc = require("typescript"); +var sourcemaps = require("gulp-sourcemaps"); +var tsProject = typescript.createProject("./tsconfig.json", { + typescript: tsc +}); + +gulp.task("build-system", function () { + return gulp.src(paths.dtsSrc.concat(paths.source)) + .pipe(plumber()) + .pipe(sourcemaps.init({loadMaps: true})) + .pipe(changed(paths.output, {extension: '.js'})) + .pipe(typescript(tsProject)) + .pipe(sourcemaps.write({includeContent: true})) + .pipe(gulp.dest(paths.output)); +}); +``` + +The packages used in the gulpfile needs to be installed. So back in the command prompt, +``` +$ npm install gulp-plumber gulp-changed gulp-typescript gulp-sourcemaps typescript --save-dev +``` + +While we're at it, let's also install the type definitions for these gulp packages +``` +$ tsd install node gulp-plumber gulp-changed gulp-typescript gulp-sourcemaps typescript core-js --save +``` + +Back in VS Code, open build/tasks/build.js and add the following two tasks at the end of the file. This basically copies all the "html" and "css" files over to a single distrubution folder where TypeScript puts the generated JavaScript files. the distribution folder is "wwwroot/dist". +```javascript +gulp.task("build-html", function () { + return gulp.src(paths.html) + .pipe(changed(paths.output, { extension: '.html'})) + .pipe(gulp.dest(paths.output)); +}); + + +gulp.task("build-css", function () { + return gulp.src(paths.css) + .pipe(changed(paths.output, { extension: '.css'})) + .pipe(gulp.dest(paths.output)); +}); +``` +Open config.js file under wwwroot, and replace the "paths" property with the section below. All we are doing is saying that all our files will be served from "dist/" unless otherwise specified. +```javascript +paths: { + "*": "dist/*", + "github:*": "jspm_packages/github/*", + "npm:*": "jspm_packages/npm/*" + } +``` + +One final thing, we need require-dir so that gulp would look for our build task in our build folder +``` +$ npm install require-dir --save-dev +``` + +Now, open gulp file and replace its content with the code +```javascript +require('require-dir')('build/tasks'); +``` + +Let's compile and run the project +``` +$ gulp build-system build-html build-css +$ dotnet run +``` +Navigate to http://localhost:5000 and see it in all its glory. +Now, let's create a task that watches for changes and recompile them when it sees one. Add a file under tasks folder called "watch.js and put in the following code +```javascript +var gulp = require('gulp'); +var paths = require('../paths'); + +// outputs changes to files to the console +function reportChange(event) { + console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); +} + +gulp.task('watch', function () { + gulp.watch(paths.source, ['build-system']).on('change', reportChange); + gulp.watch(paths.html, ['build-html']).on('change', reportChange); + gulp.watch(paths.less, ['build-css']).on('change', reportChange); +}); +``` + +Instead of doing ```gulp build-system build-html build-css```, do the following instead +``` +$ gulp watch +``` +Try editing app.html and put in something. Changes should be reflected in the browser after a full refresh. + From b0060ff6a7095968fd8e26aea1db369948524d84 Mon Sep 17 00:00:00 2001 From: Wilan Bigay Date: Wed, 1 Jun 2016 12:28:41 +1000 Subject: [PATCH 4/4] More basic Aurelia in ReadMe --- README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/README.md b/README.md index 1d55b10..2fb422c 100644 --- a/README.md +++ b/README.md @@ -316,3 +316,70 @@ $ gulp watch ``` Try editing app.html and put in something. Changes should be reflected in the browser after a full refresh. +## More basic Aurelia features +Let's add more aurelia features now that we have a working skeleton. + +### Changing the default bootstrapper +Back in VS Code, open wwwroot/index.html file. Notice the line "". By convention, when aurelia-bootstrapper sees aurelia-app, it will look for files named app.html and app.js and load it up. That's how the application is setup to run right now. Let us change that. We need a bit more flexibility and control. change that line to +```html + +``` + +Now instead of a file named app, aurelia-bootstrapper will look for a file named "main". Let us create that. Right click "src" folder and create a new typescript file "main.ts". Add the following code. This will load app.ts/app.html after doing any required configuration. +```typescript +import {Aurelia} from "aurelia-framework"; + +export function configure(aurelia: Aurelia){ + aurelia.use + .standardConfiguration() + .developmentLogging(); + + aurelia.start() + .then(a => a.setRoot()); +} +``` + +### Adding a bit routing +Open app.ts and replace it's content with the code below. Once main.ts loads up app.ts, it will look for a configureRouter function. When it finds it, it will execute it. We will create a single route here. Basically, when you navigate to http://localhost:5000, or http://localhost:5000/#home, it will look for (by convention) a file pair "home.js and home.html", load it up, bind it and serve it! +```typescript +import {Router, RouterConfiguration} from 'aurelia-router' + +export class App { + router: Router; + + configureRouter(config: RouterConfiguration, router: Router) { + config.title = 'Aurelia Demo'; + config.map([ + { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' } + ]); + + this.router = router; + } +} +``` +Open app.html and replace its content. is an aurelia component that will look what aurelia-router is serving up and load the contents inside it. Essentially, when home.html becomes available, its content will be loaded inside tag. +```html + +``` + +Add home.ts and home.html inside src folder with the following contents +```typescript +export class Home { + welcomeMessage: string = "Aurelia Skeleton using TypeScript and VSCode"; +} +``` +```html + +``` + +If gulp watcher and dotnet is still running, you would be able to see the home page when you refresh the browser + + + +Happy programming!!! \ No newline at end of file