Herramientas para trabajar con Svelte profesionalmente

1

Proyecto del curso y estado del arte de Svelte

2

Setup inicial con Sapper

3

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

4

Sistema de rutas y rutas din谩micas en Sapper

5

Layout y estructura principal de nuestro blog

6

Ruta 404 con animaciones

7

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

8

Dise帽o y maquetaci贸n del Header

9

Dise帽o y maquetaci贸n del Nav

10

Dise帽o y maquetaci贸n del Sidebar y Footer

11

Construye un Newsletter para el blog

12

Estructura de los blogposts

13

Secci贸n principal del blog y blogposts

Integraci贸n de analytics, comentarios y tiempo de lectura en tu blog

14

Integraci贸n con Google Analytics

15

Calcula el tiempo de lectura de cada blogpost

16

Muestra un emoji aleatorio en cada blogpost

17

Manejo de fechas dentro del blog con JavaScript Vainilla

18

Estructura del blogpost con comentarios

19

Integraci贸n con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

20

Instalaci贸n de Ghost

21

Configuraci贸n de Ghost en Heroku

22

Ghost Core API

23

Integra la API de Ghost en tu blog con Svelte

24

Guardando la informaci贸n de nuestros blogposts

25

Terminando la integraci贸n

Despliega tu aplicaci贸n

26

Compra de un dominio y manejo del DNS con Cloudflare

27

Deploy a Netlify

28

Deploy a Heroku

SEO y optimizaci贸n de tu sitio web

29

Metadatos y optimizaci贸n del SEO

30

Transforma tu blog en una PWA

31

RSS

32

Terminando el RSS

33

Sitemap

34

Agrega pruebas de integraci贸n con Cypress

C贸mo contin煤a tu camino profesional con Svelte

35

Siguientes pasos con Svelte

Deploy a Heroku

28/35

Lectura

Regresamos a nuestra cuenta de Heroku, ahora ha llegado el momento de integrar nuestra aplicaci贸n en esta plataforma como servicio (PaaS).

En dashboard.heroku.com debes de elegir la opci贸n de 鈥New鈥 asignas un nombre a tu aplicaci贸n, en mi caso utilizar茅 鈥blog-svelte-sapper鈥.

Elegir la regi贸n de d贸nde se encuentra f铆sicamente el servidor, te recomiendo dejar la opci贸n por defecto que es 鈥United States鈥.

heroku-1.PNG

Y por 煤ltimo damos clic en 鈥Create App鈥.

Conectar proyecto


Ahora, ha llegado el momento de conectar nuestra aplicaci贸n con Heroku, tienes dos opciones, conectar con el servicio de git privado que te ofrece Heroku o conectar tu repositorio con GitHub.

Vamos a elegir la opci贸n de conectar nuestro repositorio con GitHub, por lo tanto, en nuestra aplicaci贸n visitamos la secci贸n deploy donde podemos conectar nuestro repositorio.

heroku-2.PNG

Una vez conectado, debemos de seleccionar la opci贸n de 鈥Enable Automatic Deploys鈥 lo que nos permite tener un hook activado para desplegar autom谩ticamente nuestro proyecto al detectar nuevos cambios en nuestro repositorio.

Primer deploy


El paso que nos hace falta es desplegar nuestra aplicaci贸n de forma manual o agregar un cambio nuevo para que sea detectado.

heroku-3.PNG

Preparar proyecto


Debemos especificar una versi贸n de Node con la que trabajara nuestro proyecto, para esto vamos a editar nuestro archivo 鈥減ackage.json鈥 y a帽adir el siguiente c贸digo:

"engines": {
  "node": "12.16.x"
}

Ahora tienes todos los elementos listos debes de enviar el cambio del engine de Node para que se compile tu proyecto, guarda los cambios, s煤belos a tu repositorio en GitHub y espera por el despliegue autom谩tico.

Desplegar proyecto


Cada que necesites desplegar tus proyectos, debes de trabajar con el flujo de git, guardando cambios y enviando a la rama principal, esto desencadena un despliegue.

En Producci贸n


heroku-4.PNG

Como puedes comprobar, ahora tienes tu proyecto listo para vivir en internet, desplegado por medio de Heroku.

Conclusi贸n


Como puedes ver, Heroku tambi茅n es una herramienta en la cual nosotros podemos hacer deploy de nuestros proyectos de una forma muy sencilla y r谩pida. Te invito a que la conozcas m谩s y veas todas las opciones que nos puede ofrecer.

Para finalizar, ya que has desplegado tu blog con Svelte + Sapper comp谩rtelo con todos en la secci贸n de comentarios.

Aportes 2

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃憤

馃槉