Deploy Angular App a IIS
Tags: angular, typescript, iis, devops
Published: 2021-06-05 00:17:37

## Preparar entorno para el deploy

---

### Instalar URL Rewrite:

[Link de descarga](https://www.iis.net/downloads/microsoft/url-rewrite)
 

### Agregar Nuevo Sitio Web

![Untitled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxbn9jtouxi9k0biudmy.png) 

Aparecerá la siguiente pantalla:

![Untitled (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d83n0td2wer8d8sw26hn.png)
 
- Coloca el nombre del sitio
- La ruta donde se almacenarán los archivos de la publicación del proyecto
- Y por último, el puerto. Y "Aceptar"

### Agregar Aplicación

![Untitled (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy15yczvw2r0x43v2g2w.png)
 

Saldrá la siguiente pantalla

![Untitled (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03qgkge2wzngznxtmk9.png)
 
- Colocas el Alias
- La ruta de acceso al directorio donde irán los archivos de la publicación del proyecto.
- Por último, "Aceptar"

Deberás ver tu sitio y tu aplicación:

![Untitled (4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0875hrnqbnln6u1nlu59.png) 

Si ya se realizó la instalación del URL Rewrite. Deberá verse la opción dentro del Administrador IIS:

![Untitled (5)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eytjo7m8l28wvqz1wumq.png)

Ahora el entorno está listo.

 
## Preparar el proyecto Angular y hacer el Deploy a IIS

---

Dentro del directorio **src** debe crear un archivo `web.config` Que resolverá las rutas de la APP. 

**web.config**

```xml
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
      <clear /> <!-- Imperative Step, otherwise IIS will throw err -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
```

![Untitled (6)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpfynz27s88ns316mlbj.png)
 

imagen de referencia

Ese mismo archivo, deberá ir en el **build** de la app. Por lo que hay que indicarlo. Esto se hace dentro del archivo `angular.json` dentro del arreglo de `assets:[]`

```json
"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]
```

### Generar build de la aplicación

En este caso, se hace un build para usar en el entorno de producción. Pero también puede ser para desarrollo.

Muy importante indicar la subcarpeta donde éste estará alojado con el flag `--base-href`. También hay que destacar que debe colocarse el nombre de la aplicación que está dentro del sitio que se creó al inicio. En la sección de preparación del entorno para el deploy. En este caso, la app se le llamó "NuevoProyecto"

producción

```json
ng build --configuration=production --base-href "/NuevoProyecto/"
```

Al ejecutar el comando genera la carpeta `dist` y dentro otro directorio con el nombre del proyecto. Y dentro el publish que irá en el directorio que se creó al preparar el entorno en IIS.

Copiar los archivos que están en el `dist` y guardar en `/nuevo-sitio`

```json
📂 C:
├─ 📂 inetpub
	 ├─ 📂 wwwroot
		  ├─ 📂 nuevo-sitio
```

En IIS levantar el servicio del sitio:

![Untitled (7)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1f6y2se4osyb77lalmm.png)
 
Después de eso, abrir la app.

![Untitled (9)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g73qf4rrml4okdbrwany.png)

![Untitled (8)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f05frirti68l7o07zyzx.png)
  

Imagen de portada, de <a href="https://pixabay.com/es/users/fudowakira0-762613/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=630461">tommy pixel</a> en <a href="https://pixabay.com/es/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=630461">Pixabay</a>