Diferencias
Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
cap:aurelia [2017/09/08 16:56] user [Configurando IIS] |
cap:aurelia [2018/02/20 09:13] (actual) |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | =====Crear una aplicación web en blanco de ASP.Net Core===== | + | ====== Aurelia.IO ====== |
- | Usando visual Studio 2015 crearemos un proyecto en blanco para aplicación web en ASP .Net Core, para hacer esto haremos dos pasos, primero que haremos una solución en blanco. | + | Aurelia es un framework MVVM que nos facilita el desarrollo de aplicaciones SPA, |
- | - Buscar bajo Templates, la clasificación **Otros tipos de proyecto** | + | [[cap:aurelia:config-core|Configurar Aurelia.IO con Asp .Net Core]] |
- | - Aquí dentro encontraremos una clasificación del nombre **Soluciones de Visual Studio** | + | |
- | - Dentro de esta clasificación seleccionamos **Solución en blanco** | + | |
- | - Le damos un nombre y una ubicación | + | |
- | {{ imagen }} | + | [[cap:aurelia:memorama|Aprendiendo Aurelia.IO programando un memorama]] |
- | + | ||
- | - En el explorador de soluciones agregamos dos carpetas de solución la primera de nombre src la segunda de nombre test | + | |
- | - Dentro de la carpeta src creamos un nuevo proyecto, el proyecto deberá ser una **Aplicación web de ASP .Net Core** | + | |
- | + | ||
- | ===== Modificando nuestro proyecto web para TypeScript ===== | + | |
- | + | ||
- | Aurelia tiene su propio compilador para TypeScript, por lo tanto no es necesario que visual estudio compile el TypeScript, necesitamos deshabilitar la opción de compilar TypeScript en Visual Studio para hacer esto haremos lo siguiente: | + | |
- | + | ||
- | - En el explorador de soluciones damos click derecho sobre el proyecto web | + | |
- | - Buscamos la opción **Descargar proyecto** y hacemos clic en ella | + | |
- | - El proyecto parecerá como no disponible, hacemos click derecho en el proyecto y seleccionamos la opción de editar el archivo de proyecto | + | |
- | - Nos abrirá una ventana con todo el contenido del archivo de proyecto | + | |
- | - Buscaremos la primer sección PropertyGroup | + | |
- | - Dentro de esta sección escribiremos el siguiente bloque de código: | + | |
- | <code xml> | + | |
- | <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> | + | |
- | </code> | + | |
- | - Guardamos los cambios en el archivo y lo cerramos | + | |
- | - Hacer click derecho sobre el archivo de proyecto | + | |
- | - Seleccionamos la opción recargar proyecto | + | |
- | + | ||
- | + | ||
- | ===== Agregando el proyecto de Aurelia ===== | + | |
- | Para agregar un proyecto de Aurelia.IO es necesario abrir una ventana de Command Prompt o de PowerShell la cual sea de tu elección, navegaremos a la carpeta raíz de nuestro proyecto web, una vez en la carpeta raíz escribiremos el siguiente comando: | + | |
- | + | ||
- | <code> | + | |
- | au new --here | + | |
- | </code> | + | |
- | + | ||
- | El comando anterior iniciará el asistente de Aurelia, en dicho asistente seguiremos una serie de pasos y definiremos las opciones sobre las cuales crearemos nuestro proyecto. | + | |
- | + | ||
- | Las opciones son las siguientes: | + | |
- | * requireJS | + | |
- | * ASP .Net Core | + | |
- | * Ningún procesador CSS | + | |
- | * Sin testing | + | |
- | * Crear estructura sobre carpeta actual | + | |
- | * Descargar las dependencias. | + | |
- | + | ||
- | Una vez terminado todos estos pasos habremos configurado nuestro proyecto de Aurelia. | + | |
- | + | ||
- | ===== Configurando IIS ===== | + | |
- | + | ||
- | En nuestro proyecto de Visual Studio, abriremos el archivo **proyecto.json**, una vez abierto buscaremos la sección **dependencies** y dentro de ella agregaremos a la siguiente línea; | + | |
- | <code json> | + | |
- | "Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final" | + | |
- | </code> | + | |
- | + | ||
- | Posteriormente abriremos el archivo o startup.cs y reemplazar hemos el contenido siguiente: | + | |
- | + | ||
- | <code csharp> | + | |
- | app.Run(async (context) => | + | |
- | { | + | |
- | await context.Response.WriteAsync("Hello World!"); | + | |
- | }); | + | |
- | </code> | + | |
- | + | ||
- | Por: | + | |
- | + | ||
- | <code csharp> | + | |
- | app.UseDefaultFiles(); | + | |
- | app.UseStaticFiles(); | + | |
- | </code> | + | |
- | + | ||
- | ===== Agregando archivo de Comando Watch ===== | + | |
- | + | ||
- | En nuestro proyecto de visual estudio en la carpeta raíz, agregaremos un nuevo archivo de texto llamado watch.cmd, en este archivo agregaremos el siguiente contenido: | + | |
- | + | ||
- | <code msdos> | + | |
- | set ROOT_DIR=%~dp0 | + | |
- | + | ||
- | start cmd.exe /K "cd %ROOT_DIR% && au run --watch" | + | |
- | </code> | + | |
- | + | ||
- | Después abrimos el archivo Program.cs, en este archivo en el método estático Main reemplazaremos: | + | |
- | + | ||
- | <code csharp> | + | |
- | host.Run(); | + | |
- | </code> | + | |
- | + | ||
- | Por: | + | |
- | + | ||
- | <code csharp> | + | |
- | using (var process = new System.Diagnostics.Process()) | + | |
- | { | + | |
- | process.StartInfo = new System.Diagnostics.ProcessStartInfo("watch.cmd"); | + | |
- | process.Start(); | + | |
- | host.Run(); | + | |
- | process.Kill(); | + | |
- | } | + | |
- | </code> | + | |
- | + | ||
- | ===== Configurando TypeScript ===== | + | |
- | + | ||
- | Abrir el archivo tsconfig.json, reemplazar el siguiente texto: | + | |
- | + | ||
- | <code js> | + | |
- | "target": "es5", | + | |
- | </code> | + | |
- | + | ||
- | Por: | + | |
- | + | ||
- | <code js> | + | |
- | "target": "es2015", | + | |
- | </code> | + | |
- | + | ||
- | Con esto habremos terminado de configurar nuestro proyecto de visual estudio con Aurelia. | + |