No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando el servidor de nuestra app

7/13
Recursos

Aportes 36

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Puedes instalar el plugin de Live Server, y luego sobre la hoja que estas trabajando le das click derecho abrir con Live server.

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:

  1. Click derecho en inicio y click a Windows PowerShell (Administrador)
  2. Escribimos el siguiente comando: Set-ExecutionPolicy Unrestricted
  3. 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:

http-server

Guia r谩pida:

Lo puedes instalar de forma global con el comando:

sudo npm install -g http-server

O de forma 鈥渓ocal鈥 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
<h4>(*) -o 鈥渙pen鈥 es el flag con el cual indicas que cuando se inicie el servidor, este te muestre la pagina en tu navegador.</h4> <h3>La razon por la cual uso esta opci贸n es por que tambi茅n me sirve cuando genero el build en Angular y React, me muestra como se ver铆a mi aplicaci贸n en un servidor. Espero les sirva 馃槂</h3>

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

f

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.