Puedes instalar el plugin de Live Server, y luego sobre la hoja que estas trabajando le das click derecho abrir con Live server.
Introducción y bienvenida al curso
Aviso importante: este curso se dará de baja dentro de un mes
Lo que aprenderás para crear Router para SPA
La lógica detrás de nuestro enrutador
Conceptos de SPA Routing y nuestro primer servidor
Desglose del proyecto del curso y explicación del SPA Routing
Implementando routing del lado del cliente
Creando una aplicación sencilla en html
Creando el servidor de nuestra app
Creando nuestro archivo de rutas
Lógica de nuestro ruteador
Creación de la función loadInitialRoute
Haciendo match entre la URL y una ruta
Creando la función load routes
Actualizando nuestro index.html para agregar la nueva funcionalidad de routing
Cierre del curso y conclusiones
Cierre del curso y conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
19 Días
7 Hrs
30 Min
39 Seg
Creando el servidor de nuestra app
7/13Recursos
Aportes 36
Preguntas 2
Ordenar por:
Que tal, yo instalé solo de manera de dev-dependencies y estoy usando windows, no sé si eso tenga que ver, pero escribi los siguientes dos comandos
npm i http-server-spa -D
npx http-server-spa . ./index.html
Pueden utilizar tambien como una alternativa el package de live-server con:
-
**npm install live-server -g
-
Y para iniciar el servidor, solo debes abrir la terminal en el directorio raiz del proyecto y ejecutar: live-server
-
tatannn!, listo, tendran su server _http _en el puerto 8080. 😃
Aqui les dejo el link del website de npm para que lean al respecto: Presiona, vamos, aprenderas algo nuevo!!
Lo hice con Live server
En caso de que les de el siguiente error al ejecutar http-server-spa . ./index.html:
- Click derecho en inicio y click a Windows PowerShell (Administrador)
- Escribimos el siguiente comando: Set-ExecutionPolicy Unrestricted
- Escriben: S y entrer
Listo, ya nos le debería dar el error al ejecutar http-server-spa . ./index.html.
No me salio ningun error… creo que estoy haciendo algo mal xD
Se puede conseguir lo mismo con el plugin de VS code. Aunque para aprender sería bueno hacerlo como el profesor.
No me funciono como dijiste me toco con live server 😄
Dure como 30 minutos con un error ( no encontraba .template de undefine y yo WHAT! )
Y el problema es que live-server generá una ruta distinta que daña la lógica que hicimos , simplemente instale http-server-spa y ahí si funciono jajajaja
Podemos lograr ésto mismo con el plugin de VSCode: Live Server
¿Se puede utilizar la extensión de live server de Visual Code?
Si tienen python pueden correr este comando
open http://localhost:8080 && python -m SimpleHTTPServer 8080
se tiene que correr dentro del directorio donde estas trabajando, esto genera un server
Listo
Después de seguir estos pasos del compañero Rex Guzmán
Click derecho en inicio y click a Windows PowerShell (Administrador)
Escribimos el siguiente comando: Set-ExecutionPolicy Unrestricted
Escriben: S y entrer
Listo, ya nos le debería dar el error al ejecutar http-server-spa . ./index.html.
Lo escribí de la siguiente manera http-server-spa . ./index.html 8090
por que estaba teniendo problemas con el puerto que me asignaba.
Dejo otra alternativa para los que no quieran usar Live server:
Guia rápida:
Lo puedes instalar de forma global con el comando:
sudo npm install -g http-server
O de forma “local” para un proyecto en específico:
npm install http-server
Para usarlo:
http-server .
ok , ya lo resovi. pero que es lo que hice?
me sale muchos errores al querer istalar .
me pueden ayudar?
Me salio un error de ejecucion gracias a un aporte todo muy bien excelente
Si no han hecho el prework, usen GitBash o Hyper
Con gitBash
Listo!
Listos💪💪
Les recomiendo que usen la extencion de **VS CODE ** Live Server
npm install http-server-spa -g
http-server-spa . ./index.html
Yo uso http-server , aquí la documentación: https://www.npmjs.com/package/http-server
para instalarlo es muy similar al indicado por el profe:
npm install --global http-server
para ejecutarlo en la terminal escribes:
http-server -o
Servidor local, momento exacto.
Esta es mi pagina 🤗️
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VideoCine</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav class="Navigation">
<p class="Navigation__title">VideoCine</p>
<ul class="Navigation__links">
<li><button class="Navigation__button">Home</button></li>
<li><button class="Navigation__button">Peliculas</button></li>
<li><button class="Navigation__button">Series</button></li>
</ul>
</nav>
<div class="TitlePage">
<h1>En estreno <span class="emoji">🎥️</span></h1>
<div class="pill"><span>25 Peliculas</span></div>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
background-color: #161216;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.emoji {
height: auto;
font-size: 1.7rem;
top: -5px;
position: relative;
}
.pill {
color: #ffae007a;
display: inline-block;
padding: .3px 5px;
font-weight: 500;
}
/* --------- Navigation --------- */
.Navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15vw;
height: 10vh;
color: #9F9F9F;
background-color: rgba(71, 66, 71, 0.192);
border-bottom: 1px solid rgba(100, 100, 100, 0.356);
margin-bottom: 3rem;
}
.Navigation__title {
-webkit-text-stroke: 2px #FFAD00;
color: transparent;
font-size: 2rem;
letter-spacing: -.5px;
font-weight: 900;
}
.Navigation__links {
display: flex;
align-items: center;
list-style: none;
}
.Navigation__button {
margin-left: 1.3rem;
border: none;
background: none;
color: #fff;
font-size: 1rem;
font-weight: 600;
border-bottom: 2px solid transparent;
}
.Navigation__button:hover {
border-bottom-color: #FFAD00;
transition: .5s;
}
.TitlePage {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 15vw;
border-bottom: 1px solid rgba(100, 100, 100, 0.356);
}
.TitlePage h1 {
margin-bottom: .5rem;
font-weight: 500;
color: #FFAD00;
}
Creando el servidor de nuestra app
Primero creamos nuestro archivo index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Router SPA</title>
</head>
<body>
<header>
<ul>
<li><button>home</button></li>
<li><button>contacto</button></li>
<li><button>about me</button></li>
</ul>
</header>
<div>
<h1>Hola estas en el home</h1>
</div>
</body>
</html>
Para servir nuestra aplicacion, instalamos un paquete de node con el siguiente comando:
npm install --global http-server
http-server-spa . ./index.html
**Para instalar live server: ** Aqui
Estoy trabajando con Live Server desde VSCode.
Una brebe explicación sobre los comandos
npm install http-server-spa -g
Instala el paquete http-server-spa de manera global -g. Según la documentación es un servidor de páginas estáticas ejecutado en node con un history-api fallback incorporado
http-server-spa <directory> <fallback> <port>
http-server-spa . ./index.html
El punto (.) significa el directorio actual y como respaldo (fallback) el file index.html
Podemos elegir que pierto usar
http-server-spa ./ ./index.html 3000
Una pregunta para iniciar cualquier proyecto primero debo instalar el server en la terminal? o ya con cualquier proyecto solo abro el local host?
El Live Server en VS CODE lo recomiendo bastatante para proyectos así de pequeños, si es un poco complicado usar la terminal.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?