Skip to content

Commit

Permalink
docs(docsWeb): update the spanish version of getting started (#449)
Browse files Browse the repository at this point in the history
  • Loading branch information
@facurodriguez
facurodriguez authored Apr 9, 2020
1 parent 269eb1d commit 913c80a
Showing 1 changed file with 52 additions and 75 deletions.
127 changes: 52 additions & 75 deletions docs/getting-started_es.md
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,67 @@
---
title: Primeros pasos
title: Comenzando
order: 200
---

# Scully - Primeros pasos
# Comenzando con Scully

## Requisitos previos
¡Bienvenido a Scully!

Lo primero que se necesita para comenzar con Scully es una aplicación Angular que utilice **Angular 8.x.x** o **9.x.x** y **Node 12.x.x**
Antes de comenzar, por favor lee los [requisitos previos](pre-requisites.md).

Es posible crear una nueva aplicación Angular 9 con el siguiente comando:

```bash
npx -p @angular/cli ng new my-scully-app
```

Si esto falla, es posible instalar Angular CLI de forma global y crear una nueva aplicación con esa versión.

```
npm install -g @angular/cli
ng new my-scully-app
```

Encuentra más información aquí [👉 angular.io/cli](https://angular.io/cli)

**NOTA:** Scully usará Chromium. Asegúrese de que su Sistema Operativo (y sus restricciones por parte de su administrador) permitan instalar y ejecutar Chromium.

Este documento de introducción cubre los tres pasos para agregar Scully a su proyecto.
Esta guía de inicio cubre tres temas:

1. [Instalación](#instalación)
2. [Compilación](#compilación)
3. [Pruebas](#pruebas)

**_IMPORTANT:_ Scully requiere que el enrutador esté presente en su aplicación. Para que esto se genere automáticamente, elija la opción para agregar el Ruteo de Angular desde el indicador cuando ejecute los comandos a continuación.**

## Instalación

Para instalar Scully, ejecute el siguiente comando desde el directorio raíz de su proyecto Angular (en la terminal de comandos):
Primero, abra su aplicación Angular. Dentro del directorio raíz del proyecto ejecute el siguiente comando:

```bash
ng add @scullyio/init
```

El comando anterior instala las dependencias y configura los archivos necesarios para comenzar a compilar con Scully (_profundizaremos en esto en los próximos lanzamientos_).
Este comando instala dependencias y configura los archivos que necesita Scully.

Si la instalación fue exitosa, se mostrará un mensaje similar a este:
Una vez que finalice la instalación, se mostrará el siguiente mensaje:

```bash
Installed packages for tooling via yarn.
✔ Added dependency
UPDATE package.json (1447 bytes)
UPDATE src/app/app.module.ts (472 bytes)
UPDATE src/polyfills.ts (3035 bytes)
UPDATE src/app/app.component.ts (325 bytes)
✔ Packages installed successfully.
✔ Update package.json
CREATE scully.config.js (65 bytes)
UPDATE package.json (1507 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Install ng-lib for Angular v9
✅️ Added dependency
UPDATE src/app/app.module.ts (466 bytes)
UPDATE src/polyfills.ts (3031 bytes)
UPDATE package.json (1378 bytes)
√ Packages installed successfully.
✅️ Update package.json
✅️ Created scully configuration file in scully.{{yourApp}}.config.js
CREATE scully.{{yourApp}}.config.js (109 bytes)
UPDATE package.json (1438 bytes)
```

#### IMPORTANTE:

_Scully requiere que el router esté presente en su aplicación, no olvide agregarlo._

#### IMPORTANTE:

_Scully requiere que los archivos de distribución estén en una subcarpeta de `./dist`_
## ng generate @scullyio/init:blog

Si tienes una aplicación Angular, que genera los archivos de distribución directamente en la raíz de `./dist` Scully no puede copiar todos los archivos del dist. Este es un problema del sistema de archivos del sistema operativo. No podemos copiar recursivamente en una subcarpeta de dist. La solución es configurar la opción `architect-> build-> options-> outputPath` en una subcarpeta.
Este comando generará un módulo de blog. [Más información aquí](blog.md)

## ng g @scullyio/init:blog

Este comando generará un módulo llamado blog. [más información aquí](https://github.com/scullyio/scully/blob/master/docs/blog.md)

Una vez que se genera, puede abrir el `app.component.html` creado por defector por Angular-CLI y eliminar todo el contenido dejando solo la etiqueta de salida del router `<router-outlet></router-outlet>`
Una vez generado, elimine todo el contenido del archivo `app.component.html` y agregue solo la etiqueta de salida del enrutador `<router-outlet></router-outlet>`.

### Página de inicio

Dado que la plantilla predeterminada de Angular-CLI no crea un punto de entrada para las rutas, al principio puede ser confuso trabajar scully
**Es necesario crear una _ruta de punto de entrada_ porque el Angular CLI no crea uno de forma predeterminada.**

Cree un _Home Module_ con un _Home Component_ y sus rutas ya configuradas con el siguiente comando:

```ts
ng g m home --route=home --module=app-routing
ng generate module home --route=home --module=app-routing
```
Este comando generará el nuevo módulo para la página de inicio más un nuevo componente con una ruta configurada

### Configurar la página de inicio como raíz
Abra `app-routing.module.ts` y deje el atributo path vacío para la ruta de la página de inicio
Abra el archivo `app-routing.module.ts` y configure un atributo de ruta vacío para la ruta de inicio como se muestra a continuación:
```ts
const routes: Routes = [
Expand All @@ -99,7 +75,7 @@ const routes: Routes = [

### Inyección del servicio de rutas

Scully ofrece un servicio para acceder fácilmente a las rutas generadas. Para listarlas en su template, abra `home.component.ts` agregando el siguiente código
Scully ofrece un servicio para acceder fácilmente a las rutas generadas. Para usarlo, abra el archivo `home.component.ts` y agregue el siguiente código:

```ts
import {ScullyRoutesService} from '@scullyio/ng-lib';
Expand All @@ -121,7 +97,7 @@ export class HomeComponent implements OnInit {
}
```

y luego ciclamos dentro de `home.component.html`
Ahora, es posible recorrer los enlaces dentro del template abriendo el archivo `home.component.html` y agregando el siguiente código:

```html
<p>home works!</p>
Expand All @@ -131,38 +107,39 @@ y luego ciclamos dentro de `home.component.html`
</ul>
```

**NOTA:** Si no agrega ninguna ruta, scully pre-renderizará 0 páginas.

## Compilación

A estas alturas ya debería tener su proyecto Angular con Scully instalado con éxito, así que déjenos ejecutar una compilación de Scully y convertir su sitio en un aplicación Angular pre-renderizada.
En este punto, tienes tu proyecto Angular con Scully instalado con éxito.

#### IMPORTANTE:

_Scully requiere los archivos de distribución en la carpeta `./dist/my-scully-app`._

Dado que Scully se ejecuta en función de una compilación de su aplicación, el primer paso es compilar su proyecto Angular (con las rutas adicionales), y luego ejecutar la compilación de Scully.
**NOTA:** Si la aplicación Angular genera los archivos de distribución directamente en la carpeta raíz `./dist`. Scully no puede copiar todos los archivos. Este es un problema del sistema de archivos del sistema operativo.

Cree la aplicación para generar los archivos de distribución:

```bash
ng build
npm run scully
```

Eso es todo, ya terminaste! En el directorio de su proyecto, ahora debería tener una carpeta `/dist/static` que contenga la versión integrada de su aplicación.
Ahora, vamos a construir Scully y convertir tu aplicación Angular en un sitio estático pre-renderizado.

**NOTA:** Si tuvo algún error o advertencia durante la fase de compilación, siga las instrucciones en los errores/advertencias
(si corresponde) o [cree un issue](https://github.com/scullyio/scully/issues/new/choose).
```bash
npm run scully -- --nw
```

**NOTA:** Si no agrega ninguna ruta, Scully pre-renderizará 0 páginas.
¡Felicitaciones! Has convertido tu aplicación Angular en una aplicación perversamente rápida pre-renderizada gracias a Scully.

## Pruebas
La versión buildeada está en la carpeta `./dist/static`. Esta carpeta contiene las páginas del sitio.

Ahora que su proyecto ha sido pre-renderizado, puede validar la compilación mediante:
**NOTA:** En caso de errores o warnings durante el proceso de compilación, por favor siga las instrucciones en la sección de errores/warnings o [cree un issue](https://github.com/scullyio/scully/issues/new/choose).

#### Sirviendo los contenidos

Al utilizar algo como [http-server](https://www.npmjs.com/package/http-server) puede servir el contenido de su carpeta `dist/static`. Todas las rutas en su aplicación Angular no pre-renderizada aún deberían funcionar. No todas las aplicaciones son capaces de ejecutarse sin ellas.

**Crédito adicional**: Mientras sirve su aplicación, [deshabilite JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable) y asegúrese de que aún funcione. Este es el objetivo de su aplicación, ejecutar JavaScript deshabilitado. La mayoría de las partes de su aplicación aún deberían funcionar sin JS habilitado.

#### Examinando los contenidos

Examine los contenidos de su directorio `dist/static` y asegúrese de que todas sus páginas fueron pre-renderizadas y guardadas en HTML correctamente.

---
Utilice `npm run scully serve` para servir su contenido.
Scully serve es una opción para crear dos servidores web, uno para su aplicación Angular y el otro para Scully.

[Documentación completa ➡️](scully.md)
**Crédito adicional**: Mientras sirve la aplicación estática, [deshabilite JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable) y asegúrese de que la navegación del sitio todavía funcione y que la mayoría de las partes del mismo sigan funcionando sin JS habilitado.

0 comments on commit 913c80a

Please sign in to comment.