Guía Avanzada de Visual Studio Code
Traducido por
ScribdTranslationsGuía Avanzada de Visual Studio Code
Traducido por
ScribdTranslationsVisual Studio Code: La Guía de un Usuario Avanzado
PorMichael Wanyoike
Web
15 de abril de 2020
Compartir
En esta guía, aprenderás cómo aprovechar Visual Studio Code para
potencia tu flujo de trabajo de desarrollo.
Este artículo está escrito para principiantes de Visual Studio Code y para usuarios que buscan obtener
más fuera de la aplicación. VS Code, como se le conoce comúnmente, se considera un
editor de código "ligero". En comparación con el desarrollo completamente integrado
Los editores de entornos de desarrollo integrado (IDE) que ocupan gigabytes de espacio en disco, VS Code utiliza
menos de 200MB al instalarse.
A pesar del término "ligero", Visual Studio Code ofrece una enorme cantidad de
características que siguen aumentando y mejorando con cada nueva actualización. Para esto
guía, cubriremos las características más utilizadas. Cada programador tiene su
herramientas propias que actualizan cada vez que descubren nuevos flujos de trabajo. Si deseas
para aprender todas las herramientas y características que VS Code tiene para ofrecer, consulta su sitio oficial
documentación. Además, es posible que desee hacer un seguimiento deactualizacionespara nuevo y
características mejoradas.
Requisitos previos
Para seguir esta guía, necesitas ser competente en al menos un lenguaje de programación.
lenguaje y marco. También necesitas estar familiarizado con la versionado de tu
código de proyecto congitTambién necesitarás tener una cuenta con un repositorio remoto
plataforma como GitHub. Te recomiendo que configuresClaves SSHpara conectarte con tu
repositorio remoto.
Usaremos un mí[Link] para demostrar las características de VS Code. Si estás
nuevo en esto, no te preocupes — el enfoque de la guía no es el marco o el lenguaje
usado. Puedes transferir las habilidades que te enseñaremos a cualquier idioma y marco que
trabajar en Visual Studio Code.
Un poco de historia
No hace tanto tiempo, estos eran los entornos de desarrollo completamente integrados en
oferta
IDE de Visual Studio
NetBeans
Eclipse
IntelliJ IDEA
Estas plataformas proporcionan el flujo de trabajo de desarrollo completo, desde la codificación hasta
pruebas y despliegue. Analizan el código, destacan errores y tienen todo tipo de
otras características que brindan asistencia. También contienen muchas características que
la mayoría de los desarrolladores no los utilizan, aunque son esenciales para algunos equipos. Como resultado,
estas plataformas ocuparon mucho espacio en disco y eran lentas para iniciarse. Muchos
los desarrolladores prefieren utilizar editores de texto avanzados comoemacsyvimescribir
su código en.
Pronto, llegó una nueva generación de editores de código independientes de la plataforma. Estos ligeros
los editores proporcionaron muchas características que anteriormente eran exclusivas de los IDE. He enumerado
ellos abajo en el orden en que fueron lanzados:
Sublime TextJulio 2013
[Link] de 2015
Visual Studio CodeAbril 2016
Los desarrolladores de Mac tuvieron acceso aTextMate, que fue lanzado en octubre de 2004.
El sistema de fragmentos utilizado por todos estos editores se originó en TextMate.
Según una encuesta de desarrolladores realizada porStack OverFlowen 2019, Visual Studio
Code es el entorno de desarrollo de código más popular con un 50.7% de uso.
Visual Studio IDE ocupa el segundo lugar, y NotePad++ ocupa el tercer lugar.
Eso es suficiente historia y estadísticas. Te mostraremos cómo usar Visual Studio Code.
características.
Configuración y Actualizaciones
El instalador de paquetes de Visual Studio Code tiene menos de 100MB y consume menos
más de 200MB cuando está completamente instalado. Cuando visitas eldescargarpágina, detectará
tu sistema operativo y ofrecerte el enlace de descarga correcto.
Actualizar VS Code es fácil. Cuando hay una actualización disponible, muestra una notificación.
Para los usuarios de Windows, tendrán que hacer clic en la notificación para descargar.
y instala la última versión. El proceso de descarga ocurre en segundo plano
mientras trabajas. Cuando esté listo para instalar, aparecerá un aviso de reinicio.
Hacer clic en esto instalará la actualización para ti y reiniciará VS Code.
Para las distribuciones basadas en Ubuntu, hacer clic en la notificación de actualización simplemente
abre el sitio web para que descargues el instalador más reciente. Una forma mucho más fácil es
simplemente ejecutando sudo apt update && sudo apt upgrade -y. Esto hará
actualiza todos los paquetes de Linux instalados, incluido Visual Studio Code. La razón de esto
funciona porque VS Code agregó su repositorio a tu registro de repositorios de paquetes durante el
instalación inicial. Puede encontrar la información del repositorio en esta ruta:
/etc/apt/[Link].d/[Link].
Interfaz de Usuario
Primero familiaricémonos con la interfaz de usuario:
Fuente de la imagen
La interfaz de usuario de Visual Studio Code se divide en cinco áreas principales que puedes
ajustar fácilmente.
Barra de Actividades: te permite cambiar entre vistas: explorador, búsqueda, versión
control, depurar y extensiones.
Barra lateral: contiene la vista activa.
Editor: aquí es donde editas archivos y previsualizas archivos markdown. Puedes
organizar múltiples archivos abiertos uno al lado del otro.
Panel: muestra diferentes paneles: terminal integrado, paneles de salida para depuración
información, errores y advertencias.
Estado: muestra información sobre el proyecto y el archivo actualmente abiertos. También
contiene botones para ejecutar acciones de control de versiones, y
habilitar/deshabilitar funciones de la extensión.
También hay la barra de menú superior donde puedes acceder al sistema de menús del editor.
Para los usuarios de Linux, el terminal integrado predeterminado probablemente será la shell Bash.
Usuarios de Windows, es PowerShell. Afortunadamente, hay un selector de shell ubicado dentro
el menú desplegable de la terminal que te permitirá elegir un shell diferente. Si está instalado,
puedes elegir cualquiera de lo siguiente:
Símbolo del sistema
PowerShell
PowerShell Core
Git Bash
WSL Bash
Trabajando con Proyectos
A diferencia de los IDE completos, Visual Studio Code no proporciona creación de proyectos ni ofrece
plantillas de proyectos de la manera tradicional. Simplemente trabaja con carpetas. En mi Linux
máquina de desarrollo, estoy utilizando el siguiente patrón de carpetas para almacenar y gestionar
mis proyectos
/home/{nombre-de-usuario}/Proyectos/{nombre-de-la-empresa}/{proveedor-del-repo}/{proyecto-n
La carpeta de Proyectos es a lo que me refiero como el espacio de trabajo. Como freelance
escritor y desarrollador, separo proyectos según la empresa para la que estoy trabajando,
y qué repositorio estoy usando. Para proyectos personales, los almaceno bajo mi propio
nombre de empresa ficticia. Para proyectos con los que experimento para aprender
propósitos, y que no tengo intención de mantener por mucho tiempo, simplemente usaré un nombre como
playortutsas como un sustituto de {repo-provider}.
¡Aprende PHP gratis!
Haz el salto a la programación del lado del servidor con una cobertura completa
de PHP y MySQL.
Precio normal RRP $39.99Suyo absolutamente gratis
Nombre
Correo electrónico
Consigue el libro gratis
Si deseas crear un nuevo proyecto y abrirlo en VS Code, puedes usar el
siguientes pasos. Abre una terminal y ejecuta los siguientes comandos:
$mkdirvscode-demostración
$cdvscode-demostración
Iniciar Visual Studio Code
# código.
También puedes hacer esto en el Explorador de archivos. Cuando accedes al menú contextual del mouse,
deberías poder abrir cualquier carpeta en VS Code.
Si quieres crear un nuevo proyecto vinculado a un repositorio remoto, es más fácil crear uno
en el sitio del repositorio — por ejemplo,GitHuboBitBucket.
Toma nota de todos los campos que han sido completados y seleccionados. A continuación, ve al
terminal y ejecuta lo siguiente:
# Navegar a la carpeta espacio de trabajo/empresa/repositorio
$cdProjects/sitepoint/github/
Clona el proyecto en tu máquina
$gitclone git@[Link]:{insertar-nombre-de-usuario-aquí}/vscode-nextjs-dem
Abrir proyecto en VS Code
$cdvscode-nextjs-demo
$ código.
Una vez que el editor esté en funcionamiento, puedes iniciar la terminal integrada usando
el atajo de teclado Ctrl+~ (tecla tilde). Utiliza los siguientes comandos para
genera [Link] e instala paquetes:
Generar archivo `[Link]` con configuraciones predeterminadas
$npminit -y
# Instalar dependencias del paquete
$npm installnext react react-dom
A continuación, abre [Link] y reemplaza la sección de scripts con esto:
"scripts":{
siguiente
siguiente construcción
siguiente inicio
}
La ventana completa de Visual Studio Code debería verse así:
Antes de que veamos la siguiente sección, me gustaría mencionar que VS Code también soporta
el concepto deespacios de trabajo de múltiples raícesSi estás trabajando con proyectos relacionados —
front-end, back-end, documentos, etc. — puedes gestionarlos todos en un solo espacio de trabajo
dentro de un editor. Esto hará que sea más fácil mantener tu código fuente y
documentación en sincronía.
Control de Versiones con Git
Visual Studio Code viene con un gestor de control de versiones Git integrado. Proporciona un
Interfaz de usuario donde puedes preparar, confirmar, crear nuevas ramas y cambiar a
los existentes. Comprometamos los cambios que acabamos de hacer en nuestro proyecto. En laActividad
bar, abre el Panel de Control de Fuentes y localiza el botón de Etapa Todos los Cambios
como se muestra a continuación.
Haz clic en él. A continuación, ingresa el mensaje de confirmación "Instaladas las dependencias de [Link]", luego
haz clic en el botón Commit en la parte superior. Tiene el icono de marca de verificación. Esto confirmará
los nuevos cambios. Si miras el estado ubicado en la parte inferior, verás varios
iconos de estado en la esquina izquierda. El 0 significa que no hay nada de lo que tirar
el repositorio remoto. El 1 significa que tienes un compromiso que necesitas enviar a
tu repositorio remoto. Hacer clic en él mostrará un aviso sobre la acción que se llevará a cabo
lugar. Haz clic en Aceptar para extraer y enviar tu código. Esto debería sincronizar tu local
repositorio con el repositorio remoto.
Para crear una nueva rama o cambiar a una rama existente, solo haz clic en la rama.
nombre maestro en la barra de estado, esquina inferior izquierda. Esto hará aparecer una rama
panel para que tomes una acción.
No te olvides de revisar las siguientes extensiones para una experiencia aún mejor con Git:
Git Lens
Historia de Git
El soporte para un tipo diferente de SCM, como SVN, se puede agregar mediante la instalación del
extensión SCM relevante del mercado.
Crear y Ejecutar Código
En la Barra de Actividad, regresa al Panel de Explorador y usa la Nueva Carpeta
botón para crear la carpeta páginas en la raíz del proyecto. Selecciona esta carpeta
y utiliza el botón Nuevo Archivo para crear el archivo pages/[Link]. Copia lo siguiente
código
functionPaginaPrincipal() {
<div>¡Bienvenido a [Link]!</div>
}
exportar páginaPrincipal;
Con el Panel del Explorador, deberías ver una sección llamada Scripts de NPM. Expande en
esto y pasar el cursor sobre dev. Aparecerá un botón de ejecución (icono de reproducción) junto a él. Haz clic en
y esto lanzará un servidor de desarrollo [Link] dentro del Terminal Integrado.
Debería tardar unos segundos en arrancar. UsaCtrl+ Haga en la URL
clic
[Link] en tu navegador. La página debería abrirse
mostrando con éxito el mensaje de "Bienvenido". En la siguiente sección, veremos
cómo podemos cambiar las preferencias de Visual Studio Code.
Configuración del usuario y del espacio de trabajo
Para acceder a la configuración de preferencias de VS Code, utiliza la tecla de acceso directoCtrl+ , Puedes
también accédelo a través del comando del menú así:
En Windows/Linux – Archivo > Preferencias > Configuración
En macOS – Código> Preferencias> Configuración
Por defecto, debería aparecer una interfaz gráfica del editor de aSettings. Ayuda a los usuarios.
realiza cambios en las preferencias fácilmente, ya que hay miles de configuraciones editables
que están disponibles. El editor de Configuración proporciona nombres amigables para el usuario y
descripción de lo que hace cada configuración. Además, se han relacionado configuraciones
agrupados y hay una barra de búsqueda para localizar una configuración específica.
Al cambiar la configuración utilizando el editor, presta atención al alcance activo en el
dato. Tenga en cuenta que no todas las configuraciones se pueden ajustar a través de la interfaz gráfica.
Para eso, tienes que editar el archivo [Link] directamente. A medida que te desplazas hacia abajo
En el editor de configuraciones, encontrarás un acceso directo que te llevará a este archivo.
Existen dos ámbitos diferentes en los que se clasifican las configuraciones de Visual Studio Code.
bajo:
Configuración del usuario: La configuración se almacena bajo la cuenta de usuario. Tendrá efecto.
en todos los proyectos en los que trabajas.
Espacio de trabajo: La configuración se almacena dentro de la carpeta del proyecto o del espacio de trabajo. Ellas
aplicar solo en ese proyecto específico.
Dependiendo de tu plataforma, puedes localizar la configuración de usuario de VS Code en el
las siguientes ubicaciones:
Windows:%APPDATA%\Code\User\[Link]
macOS:$HOME/Library/Application
Soporte/Código/Usuario/[Link]
Linux:$HOME/.config/Code/Usuario/[Link]
ParaWorkspace, simplemente crea una carpeta .vscodeen la raíz de tu proyecto. Luego
crea el archivo [Link] dentro de esta carpeta. Si está trabajando con los ajustes
editorpanel, lo hará automáticamente por ti cuando cambies la configuración bajo
elAlcanceDelEspacioDeTrabajo. Aquí hay un subconjunto de las configuraciones globales con las que prefiero trabajar:
{
"[Link]":false,
activado
"[Link]":false,
"[Link]":true,
siempre
"[Link]":false,
doble clic
por defecto
"[Link]":true,
[Link] Code
"[Link]":true,
"[Link]":2,
"[Link]":false
}
Tiendo a trabajar en múltiples proyectos simultáneamente, de ahí la configuración.
[Link] me permite abrir nuevas carpetas de proyecto
sin cerrar (reemplazar) el activo. Para [Link],
Lo he configurado en Prettier, que es una extensión que tengo instalada. Hablaremos de esto en un
sección posterior en breve. A continuación, veamos las asociaciones de idiomas.
Asociación de Idiomas
Hago muchos proyectos usando React. Últimamente, la mayoría de los frameworks de React generan
los componentes utilizan la extensión .jsextension en lugar de .jsx. Como resultado, el formato
y la coloración de la sintaxis se convierte en un problema cuando comienzas a escribir código JSX. Para
Para esto, necesitas asociar los archivos .js con JavaScriptReact. Puedes
haz esto fácilmente cambiando el Modo de Idioma a través delCtrl+ Turno+ P
panel de comandos. También puedes actualizar [Link] agregando esto
configuración:
{
"[Link]":{
javascriptreact
}
}
La próxima vez que abras un archivo JS, será tratado como un archivo React JSX. He especificado
esto en mi configuración global ya que a menudo trabajo con proyectos de React. Desafortunadamente,
hacer esto rompe una función integrada llamadaEmmetEs un complemento popular que ayuda
los desarrolladores completan automáticamente el código HTML y CSS de una manera muy intuitiva. Puedes x
este problema añadiendo la siguiente configuración en [Link]:
{
"[Link]":{
javascriptreact
}
}
La próxima vez que tengas problemas para activar Emmet para una extensión de archivo en particular o
idioma, verifica si se puede resolver agregando la asociación de idioma en
[Link]. Para más información, consulta eloficial
documentación para Emmet de VS Code.
Atajos de teclado
Hasta ahora, hemos cubierto dos atajos de teclado:
Ctrl+ , Abrir configuración
Ctrl+ Turno+ P: Abrir la paleta de comandos
La Paleta de Comandos proporciona acceso a toda la funcionalidad de Visual Studio Code.
funcionalidad que incluye atajos de teclado para operaciones comunes. Si instalas
una extensión, cualquier acción desencadenada manualmente se enumerará aquí. Sin embargo, para
extensiones como Prettier y Beautify, usarán el mismo comando Formato.
Visual Studio Code también tiene su propio plugin de formateador integrado. Para especificar qué
el complemento debe ejecutar la acción, necesitas ir al editor de configuraciones y
cambia la configuración del Formateador predeterminado. Aquí hay un ejemplo de cómo lo he configurado
en el mío
{
[Link] Code
}
También puedes especificar un formateador diferente para un modo de idioma específico. Aquí hay
varios atajos de teclado más que necesitas memorizar:
Ctrl+ Pte permitirá navegar a cualquier le o símbolo escribiendo su nombre
Ctrl+ Pestañate haré pasar por el último conjunto de archivos abiertos
Ctrl+ Turno+ Ote permitirá navegar a un símbolo específico en un archivo
Ctrl+ Gte permitirá navegar a una línea específica en un archivo
Aquí están mis comandos favoritos que uso a menudo mientras escribo código:
Ctrl+ Dpresione varias veces para seleccionar palabras clave idénticas. Cuando usted
comienza a escribir, renombra todas las palabras clave seleccionadas
Ctrl+ Cambio+ Arriba/AbajoAñadir cursor arriba o abajo para editar
múltiples líneas a la vez
Alt+ Turno+ Haga clicAgregar cursor en múltiples ubicaciones para editar en
diferentes secciones de código simultáneamente
Ctrl+ JAgrega 2 o más líneas en una. Funciona perfectamente si tienes un
formateador activo mientras editas el código
Ctrl+ FBuscar una palabra clave en el archivo actual
Ctrl+ HBuscar y reemplazar en el archivo actual
Ctrl+ Turno+ FBuscar en todos los les
Si visitas las opciones de menú, encontrarás teclas de acceso rápido para la mayoría de los comandos.
Personalmente, nunca me he acostumbrado a algunas de las teclas de acceso rápido predeterminadas que vienen
con Visual Studio Code debido a usar editores como Atom durante mucho tiempo. El
la solución que encontré fue simplemente instalar elMapa de teclas de AtomEsto me permite usar el
tecla de acceso rápidoCtrl+ \ para alternar la barra lateral. Si deseas editar el teclado
vinculaciones tú mismo, simplemente ve al menú bajo Archivo>Preferencias>Teclado
Atajos. (Código>Preferencias>Atajos de teclado en macOS).
8.7K vistas
Características del editor de código
En esta sección, echaremos un vistazo rápido a las diversas características amigables para desarrolladores de Visual
Studio Code proporciona ayuda para que escribas más rápido, limpio y más mantenible.
código.
Intellisense
Esta es una característica popular también conocida como "completado de código" o autocompletar. Fuera
fuera de la caja, VS Code proporciona Intellisense para:
JavaScript, TypeScript
HTML
CSS, SCSS y Less
A medida que escribes tu código, aparecerá una ventana emergente con una lista de opciones posibles. Cuanto más
cuanto más escribes, más corta se vuelve la lista. Puedes presionarEntraroPestañauna vez tu
la palabra clave prevista está resaltada para autocompletar tu código. PresionandoEscvoluntad
quitar el popup. Insertar un . al final de una palabra clave o presionarCtrl+
la barra espaciadora activará el popup de IntelliSense.
7.9K vistas
Si estás trabajando con un idioma que no es compatible de forma predeterminada, puedes
instalar una extensión de idioma de lamercadopara activar IntelliSense para tu
lenguaje de programación deseado. Consulta eldocumentos oficialespara aprender más sobre cómo
puedes personalizar IntelliSense.
Fragmentos
Escribiendo código repetitivo como declaraciones if, bucles for y componentes
la declaración puede ser un poco agotadora. Podrías encontrarte copiando y pegando código
para trabajar más rápido. Afortunadamente, Visual Studio Code ofrece una función llamada
Fragmentos, que son simplemente plantillas de código. Por ejemplo, en lugar de escribir
[Link], solo escribe log y IntelliSense sugerirá insertar el fragmento
para ti.
Hay muchos fragmentos a los que puedes acceder siempre y cuando hayas memorizado el
abreviatura o palabra clave que activa la inserción de fragmentos. Dado que eres nuevo en esto, tú
puedes acceder a una lista de todos los fragmentos disponibles a través de la Paleta de Comandos>Insertar Fragmentos:
Desplázate hacia arriba y hacia abajo para ver la lista completa. Ten en cuenta que la mayoría de los fragmentos tienen
tabuladores que te permiten reemplazar las secciones relevantes de código cuando insertas
ellos. Puedes encontrar más extensiones de fragmentos en el mercado. También puedes
crea el tuyo propio. Estoartículote muestra cómo hacer ambos. Puedes consultar el
documentos oficialespara más información sobre cómo definir tus propios fragmentos.
Formato
A menudo, al escribir o pegar código de diferentes fuentes, tendemos a mezclar la codificación
estilos. Por ejemplo:
sangrado con espacios vs tabulaciones
terminando con punto y coma;
comillas dobles o comillas simples
El formato es importante, ya que hace que el código sea legible. Sin embargo, puede llevar tiempo.
consumir cuando te encuentras con grandes secciones de código sin formato. Afortunadamente,
Visual Studio Code puede realizar el formato por ti con un solo comando. Tú
puede ejecutar el comando de formato a través de la Paleta de Comandos. Visual Studio
El código admite formato para los siguientes idiomas de serie:
JavaScript
TypeScript
JSON
HTML
Puedes personalizar el comportamiento de formateo de Visual Studio Code cambiando el
trueo falso
formatear la línea después de escribir
formatear un le al guardar
formatear el contenido pegado
Sin embargo, los formateadores integrados pueden no ajustarse a tu estilo de codificación. Si eres
trabajando con frameworks como React, Vue o Angular, encontrarás que el incorporado
los formateadores tienden a arruinar tu código. Puedes corregir esto desactivando el formateo para
un idioma específico:
"[Link]":false
Sin embargo, la mejor solución es instalar una extensión de formateador de la
mercado. Mi favorito es [Prettier]([Link]
[Link] Code), ya que admite un gran número de idiomas
incluyendo:
Flujo · JSX · JSON
CSS · SCSS · Less
Vue · Angular
GraphQL
Después de instalarlo, necesitarás establecerlo como el formateador predeterminado:
{
[Link] Code
"[javascript]":{
[Link] Code
}
}
También se recomienda que instales prettierpackage localmente como un desarrollo.
dependencia
npm install prettier -D --save-exact
Las opciones de formato predeterminadas que Prettier impone pueden funcionar para ti. Si no, tú
puede personalizar creando un archivo de configuración .prettierrc ya sea en la raíz
de tu proyecto o en tu directorio personal. Puedes colocar tu formato personalizado
reglas aquí. Aquí hay un ejemplo:
{
todos
"tabWidth":2,
"semi":false,
"singleQuote":true
}
Siéntete libre de revisar otrosextensiones de formateoSin embargo, encontrarás que Prettier
ser el más popular.
Linting
ALint, o Linter es una herramienta que analiza tu código y verifica errores de sintaxis.
problemas de estilo, llamadas a variables no declaradas, uso de funciones obsoletas,
mal uso del ámbito y muchos otros problemas. Visual Studio Code no viene
se envió con cualquier Linter. Sin embargo, facilita la configuración de uno para el
el lenguaje de programación que estás utilizando. Por ejemplo, si estás trabajando en nuevo
proyecto de Python, recibirás unindicacióninstalar uno para ti. También puedes abrir el
Paleta de comandos(Ctrl+ Cambio+ P) y selecciona Python: Seleccionar Linter
comando.
Para JavaScript, necesitarás instalar una extensión comoESLintcuál es el
más popular. Esta extensión requiere que instales ESLint como una dependencia de desarrollo.
Es posible que también necesite uno o más complementos de ESLint que le ayudarán a revisar el código.
estilo y marco que estás utilizando. Puedes consultar nuestroguíasobre cómo
configura ESLint. También hay otrosherramientas de linterpuedes salir. Mi
la recomendación es usar ESLint ya que es más fácil de configurar y admite
más estilos y marcos de JavaScript.
Una vez que hayas configurado la herramienta de linting, VS Code lintará automáticamente tu código cada
el tiempo que guardas el le. También deberías actualizar tus scripts de [Link] para
incluye un comando para ejecutar la herramienta de lint.
Depuración
Si usas declaraciones de impresión para depurar, deberías cesar y desistir ya que hay un
una mejor manera de depurar tu código. Con VS Code, puedes establecer puntos de interrupción y
inspeccionar variables mientras tu código se está ejecutando.
Fuente de la imagen
Consulta nuestra guía sobre la depuración de proyectos de JavaScript con VS Code y
Debugger de Chrome para instrucciones paso a paso sobre cómo depurar tu código.
Resumen
Ahora hemos llegado al final de la guía. Como se mencionó anteriormente, la información aquí
te ayudo a iniciar tu camino para mejorar tu flujo de trabajo de codificación con Visual
Código de estudio. Te recomiendo que revises nuestras 10 extensiones imprescindibles para VS
Código. Aunque la mayoría de las herramientas de VS Code son fáciles de aprender e integrar en tu
el flujo de trabajo, otros necesitan algo de tiempo para averiguar y acostumbrarse. Sin embargo,
dominar las funciones de VS Code te hará un desarrollador eficiente y mejor
desarrollador.
Si quieres alcanzar el máximo pico de rendimiento productivo con Visual
Código de estudio, revisa Visual Studio Code: Edición y depuración de extremo a extremo
Herramientas para desarrolladores web. Es un libro fantástico de Wiley que puedes leer.
en línea (¡o fuera!) en nuestra biblioteca Premium.
Michael Wanyoike
Escribo código limpio, legible y modular. Me encanta aprender nuevas tecnologías que aporten eficiências y
mayor productividad en mi flujo de trabajo.
Últimos trabajos remotos
Ingeniero Frontend Senior
SitePoint
reaccionarjavascript
.Net desarrollador
Tecnología Global
.net sql
Ingeniero Senior - Equipo de Datos
IPinfo
bigquery pitón
Desarrollador Full Stack
Sin fondo
DesarrolladorToArquitecto de OLS y OSS
Bit
javascript
Más trabajos remotos
7 Razones PARA NO usar un sitio estático
Generador
PorCraig Buckler
Web
6 de mayo de 2021
Compartir
Los generadores de sitios estáticos (SSG) son populares y ofrecen muchos beneficios, pero esto
el artículo discute las razones por las que puede que no sean un sustituto adecuado para tu
sistema de gestión de contenido (CMS).
En miartículo anterior, discutimos cómo su sitio podría beneficiarse de usar un
generador de sitios estáticos
Un sitio estático es una colección de páginas contenidas en archivos HTML básicos.
podría escribir esto a mano en un editor de texto, pero gestionar activos y repeticiones
Elementos como la navegación pueden volverse problemáticos.
Un sistema de gestión de contenido almacena el contenido de las páginas en una base de datos y
ofrece instalaciones para editar y aplicar temas. La gestión se vuelve más fácil en
el costo de la flexibilidad, el rendimiento, los requisitos del servidor, la seguridad y
copias de seguridad.
Un generador de sitios estáticos es un compromiso entre usar un código estático hecho a mano
sitio y un CMS completo. Generas el sitio completo una vez usando datos en bruto (como
Archivos de Markdown) y plantillas. El conjunto resultante de archivos se transfiere a
tu servidor en vivo.
El término “Jamstack” (JavaScript, APIs y marcado) se utiliza en relación con
sitios estáticos. Se refiere al aumento de frameworks, funciones sin servidor, y
herramientas asociadas que generan archivos estáticos pero permiten interactividad compleja a
ser añadido.
Los generadores de sitios estáticos populares incluyenJekyll, Eleventi, Gatsby, Hugo, y
MetalistaLos SSG están disponibles para la mayoría de los idiomas; verStaticGenpara muchos
más.
Los SSG parecen ofrecer los beneficios tanto del CMS como de los mundos estáticos, pero pueden no
ser adecuado para cada proyecto ...
Estás por tu cuenta
No llegarás muy lejos utilizando un generador de sitios estáticos sin algo de desarrollo
experiencia. El proceso es más difícil que usar un CMS, hay menos
recursos, y podrías tener dificultades para encontrar complementos y plantillas preconstruidos.
Contraste eso con WordPress. Un usuario no técnico puede requerir instalación.
asistencia pero, una vez que eso esté completo, pueden editar un sitio e instalar uno de los
muchos miles de temas y plugins disponibles. Puede que no tengan lo mejor
sitio web a medida, pero están funcionando con mínima intervención.
2. Parálisis por elección
Hay muchosgeneradores de sitios estáticospero incluso las herramientas más populares se utilizan
por una pequeña proporción de la comunidad web. Necesitarás tiempo para investigar,
investiga y evalúa las opciones. Uno de los primeros SSGs fue el basado en Ruby
Jekyllpero, aunque no necesariamente requieres experiencia en Ruby, te ayudará si has
usó el idioma antes.
Hay muchos CMS, pero hay una opción obvia: WordPress. Alimenta más
más del 40% de la Web, por lo que la ayuda es abundante. De nuevo, ayudará si tienes algo de PHP
experiencia, pero incluso un no desarrollador puede crear un sitio web razonable utilizando
temas y complementos de estantería.
3. El tiempo de configuración inicial
Crear tu primer sitio estático tomará tiempo. Necesitarás aprender el proceso de construcción,
y gran parte del código de la plantilla necesitará ser desarrollado. Scripts de implementación
también puede ser necesario.
Desarrollar un tema de CMS personalizado también puede ser complicado, pero preconstruido
las plantillas están disponibles y la asistencia es más fácil de encontrar. Un mayor desarrollo puede
no se requerirá después de la instalación inicial.
4. Sin interfaz de administración
Los clientes pueden ser cautelosos cuando se enfrentan a una interfaz CMS compleja. Preguntarles
Crear y editar un conjunto de archivos Markdown puede aterrorizar a muchos. Puedes hacer el
hacer el proceso más fácil quizás:
usando su CMS existente como fuente de datos SSG, o
proporcionando flujos de trabajo más simples, como editar archivos basados en Git enStackEdito
[Link].
Pero esto afectará aún más su tiempo de desarrollo inicial.
5. Consistencia del sitio web
Los sitios estáticos son flexibles: todo lo que se contenga dentro del contenido fuente se puede renderizar.
en una página web. Los usuarios pueden tener la posibilidad de incluir scripts, widgets o numerosos
artículos no deseados.
Un CMS puede configurarse para restringir al usuario. El contenido normalmente está vinculado a un
base de datos con campos específicos, por lo que los paneles de administración piden al usuario que ingrese un
título
algo en un campo inesperado, no aparecerá en el sitio web a menos que esté
implementado dentro de la plantilla del tema.
6. Gestionando Sitios Grandes
Considere un sitio web con miles de páginas, publicaciones de contenido diarias, en tiempo real
noticias de última hora, y docenas de autores en múltiples ubicaciones. Es posible que
gestiona contenido utilizando un generador de sitios estáticos, pero:
La edición de contenido y la publicación pueden ser más incómodas. Los editores pueden requerir
acceso al repositorio de Git o carpetas compartidas en lugar de un simple web o
interfaz de la aplicación.
Las actualizaciones en tiempo real están retrasadas porque el sitio debe ser reconstruido, probado y
desplegado.
Los tiempos de construcción pueden aumentar rápidamente y el despliegue podría volverse
voluminoso.
Los generadores de sitios estáticos son quizás más adecuados para sitios que contienen no más de un
unas pocas cientos de páginas con un par de nuevas publicaciones cada semana. Construcción automatizada y
se requerirán procesos de implementación, y es posible que llegues a un punto en el que un CMS
se convierte en una opción más práctica.
7. Funcionalidad del lado del servidor
Los sitios estáticos son perfectos para páginas de contenido, pero la situación se vuelve más
desafiante cuando requieres inicios de sesión de usuario, llenado de formularios, facilidades de búsqueda, discusión
foros, o cualquier otra interactividad de servidor y base de datos. Las opciones incluyen:
1. Añadiendo un componente de terceros del lado del cliente comoBúsqueda de Angoliao
Comentarios de Disqus.
2. Crear tus propias APIs de servidor (o sin servidor) que pueden ser consumidas por
JavaScript del lado del cliente para añadir funciones requeridas.
3. Generando páginas que contienen <?php ... ?> o código del lado del servidor similar
bloques.
4. Cambiar a un marco [Link], que renderiza contenido estático
donde sea posible pero también permite el procesamiento del lado del servidor.
Sin embargo, el tiempo de desarrollo, la complejidad de la construcción, las implicaciones de seguridad, la prueba
el esfuerzo y el gasto aumentarán. Contrastarlo con la instalación de un WordPress adecuado
plugin que puede implementar funcionalidad del lado del cliente o del lado del servidor en unos pocos
minutos.
¿Es un sitio estático adecuado para ti?
Antes de tomar cualquier decisión, examine:
¡Aprende PHP gratis!
Da el salto a la programación del lado del servidor con una cobertura integral
de PHP y MySQL.
Normalmente RRP $39.99Tu absolutamente gratis
Nombre
Correo electrónico
Consigue el libro gratis
los requisitos de tu proyecto, tamaño, complejidad, frecuencia de actualización, etc.
tus usuarios, su ubicación, expectativas, etc.
las habilidades de desarrollo de su equipo, y
cualquier factor de hospedaje y/o implementación.
La gran mayoría de los sitios web rara vez supera unas pocas docenas de páginas, recibe infrecuentemente
actualizaciones, y dependen de un desarrollador para hacer esos cambios. Un CMS a menudo
exceso, por lo que un generador de sitios estáticos podría simplificar el desarrollo y reducir costos.
Persuadir a tu cliente para que abandone sus paneles de administración de contenido puede ser un
¡tarea más difícil!
Para demostraciones prácticas de la construcción de sitios con un generador de sitios estáticos, véase:
Cómo crear un sitio estático con Metalsmith
Comenzando con Eleventy
Cómo usar WordPress como un CMS sin cabeza para Eleventy
Manejo de formularios para sitios Jamstack utilizando Cloudflare Workers
Craig Buckler
Craig es un consultor web independiente del Reino Unido que creó su primera página para IE2.0 en 1995. Desde entonces, ha estado
abogando por normas, accesibilidad y técnicas de mejores prácticas de HTML5. Ha creado una empresa
especificaciones, sitios web y aplicaciones en línea para empresas y organizaciones, incluido el Reino Unido
Parlamento, el Parlamento Europeo, el Departamento de Energía y Cambio Climático, Microsoft, y más. Él es
escribió más de 1,000 artículos para SitePoint y puedes encontrarlo@craigbuckler.
Últimos Trabajos Remotos
Ingeniero Frontend Senior
SitePoint
reaccionajavascript
.Net Desarrollador
Tecnología Global
.net sql
Ingeniero Senior - Equipo de Datos
IPinfo
bigquery pitón
Desarrollador Full Stack
Infinito
DesarrolladorToArquitecto de OLS y OSS
Bit
javascript
Más trabajos remotos
7 Razones para Usar un Generador de Sitios Estáticos
PorCraig Buckler
JavaScript
28 de abril de 2021
Compartir:
Los generadores de sitios estáticos (SSG) se han vuelto cada vez más populares en el pasado
década. Este artículo discute cómo su sitio podría beneficiarse del desarrollador-
procesos de construcción amigables, despliegues más fáciles, rendimiento mejorado, y
mejor seguridad ofrecida por un sitio estático.
Primero, establezcamos lo que queremos decir con el término "generador de sitios estáticos" ...
¿Qué es un sitio estático?
Piensa en el primer sitio web que creaste. La mayoría de los desarrolladores empiezan creando un
series de páginas contenidas dentro de archivos HTML individuales. Cada uno llamará a recursos
como imágenes, CSS y quizás una pizca de JavaScript. Posiblemente tú
lanzó estos les directamente desde el sistema de les sin un servidor web. La vida fue
simple.
Las dificultades surgen a medida que su sitio se vuelve más grande y complejo. Considere
Puede ser similar en cada archivo, pero agregar una nueva página requiere actualizaciones
a cada otro. Incluso las referencias a CSS e imágenes pueden volverse incómodas ya que
las estructuras de carpetas evolucionan. Es posible que hayas considerado opciones como en el lado del servidor
incluye o PHP, pero una opción más fácil puede ser un sistema de gestión de contenido
(CMS) …
¿Qué es un Sistema de Gestión de Contenidos?
Un CMS típicamente proporciona paneles de control administrativos. Estos permiten a los autores
escribe contenido que se almacena en una base de datos del lado del servidor. Cuando un visitante solicita una URL,
el CMS:
determina qué página se requiere
2. solicita contenido adecuado de la base de datos
3. carga una plantilla HTML (normalmente del sistema de archivos)
4. renderiza el contenido dentro de la plantilla, y
5. devuelve una página HTML formateada al navegador del visitante.
Esto ocurre casi instantáneamente. La plantilla puede incluir código para generar menús.
según la jerarquía de navegación. La vida es dulce, y más de cuatro de cada diez
las personas eligen el código abierto impulsado por PHP/MySQLWordPressCMS a
gestionar su sitio web.
Desafortunadamente, un CMS plantea un conjunto diferente de problemas:
Necesitas seguir la forma de trabajar del CMS. Puede ser incómodo añadir
texto o componentes personalizados.
El servidor está realizando más trabajo, y el rendimiento puede verse afectado.
Hay puntos adicionales de fallo. Una actualización de software o una falla en la base de datos
puede hacer que tu sitio se caiga.
¿Qué es un Generador de Sitios Estáticos?
Un SSG es un compromiso entre el uso de un sitio estático codificado a mano y un CMS completo,
mientras retiene los beneficios de ambos. En esencia, generas una página HTML estática-
sitio web basado en conceptos similares a CMS, como plantillas. El contenido puede ser
extraído de una base de datos, archivos Markdown, una API o cualquier almacenamiento práctico
ubicación.
La generación del sitio puede ocurrir en tu máquina de desarrollo, servidor de preproducción, o
usando un servicio para construir cuando se envían cambios al repositorio de código. El
los archivos HTML resultantes y otros activos se despliegan en un servidor web en vivo.
El término “estático” no significa “inmutable”. Un SSG construye una página una vez, mientras que un
CMS lo construye en cada solicitud. El resultado final es idéntico y los usuarios nunca
conocer la diferencia.
Un concepto relacionado es un CMS "Sin cabeza" o "Desacoplado". Estos utilizan una interfaz
como WordPress para manejar la administración de contenido pero permitir que otros sistemas
acceder a los datos a través de unAPI REST, o unAPI de GraphQL. Por lo tanto, un SSG como
Eleventy puedeconstruir un sitio web estático usando WordPresscontenido de la página extraído de
un servidor interno. Los archivos HTML resultantes se pueden cargar en un servidor web, pero
la instalación de WordPress nunca necesita ser accesible públicamente desde fuera
organización.
El términoJamstack(JavaScript, APIs y marcado) también se utiliza en relación a
sitios estáticos. Se refiere al aumento de frameworks, funciones sin servidor, y
herramientas asociadas que generan archivos estáticos pero permiten una interactividad más compleja
ser creado.
Los generadores de sitios estáticos populares incluyenJekyll, Eleventy, Gatsby, Hugo, y
Metalúrgico. Los SSG están disponibles para la mayoría de los idiomas (verStaticGenpara muchos
más). Marcos [Link] páginas de forma estática donde sea posible, pero
también permite al desarrollador ejecutar código del lado del servidor cuando sea necesario.
Examinemos los beneficios de usar un SSG ...
1. Flexibilidad
Los CMSs normalmente limitan tus opciones, porque están ligados a una base de datos con
campos específicos. Si deseas agregar un widget de Twitter a algunas páginas, normalmente
requerir un plugin, un shortcode o alguna funcionalidad personalizada.
En un sitio estático, el widget puede insertarse simplemente en un archivo directamente o usando un
hay pocos límites, porque estás liberado de esos
impuesto por un CMS.
2. Mejor rendimiento
La mayoría de las aplicaciones CMS ofrecen sistemas de caché integrados o potenciados por plugins para
asegúrese de que las páginas se generen y reutilicen cuando sea posible. Esto es efectivo, aunque
el overhead de gestionar, validar y regenerar las páginas en caché sigue existiendo.
Los sitios estáticos pueden crear páginas precacheadas que nunca necesitan expirar. Los archivos también pueden
ser minimizado antes del despliegue para garantizar la carga más pequeña y fácilmente
desplegado a través de redes de entrega de contenido globales (CDN). Un sitio estático siempre
rendir mejor que una versión impulsada por un CMS utilizando una plantilla similar.
¡Aprende PHP gratis!
Haz el salto a la programación del lado del servidor con una cobertura integral
de PHP y MySQL.
Normalmente RRP $39.99Suya absolutamente gratis
Nombre
Correo electrónico
Consigue el libro gratis
3. Menos dependencias del lado del servidor
Una instalación típica de WordPress requiere:
un sistema operativo adecuado como Ubuntu o CentOS
un servidor web como Apache o NGINX
PHP con extensiones asociadas y configuraciones del servidor web
MySQL
la aplicación de WordPress
cualquier complemento necesario
el código del tema/plantilla.
Estas dependencias deben ser instaladas y gestionadas. WordPress requiere menos.
mayor esfuerzo que algunas otras aplicaciones, pero aún es posible que una sola actualización
causar caos.
Un generador de sitios estáticos puede requerir tantas dependencias, pero pueden ejecutarse
en la PC de un desarrollador y no se despliegan en un servidor de producción. Un SSG
genera archivos HTML del lado del cliente y activos asociados que se pueden alojar en
cualquier servidor web. No hay nada más que instalar, gestionar o mantener.
4. Mayor fiabilidad
Un CMS es complejo, con muchas piezas móviles y puntos de fallo. Ejecuta un
Un sitio de WordPress durante cualquier período de tiempo y seguramente te encontrarás con el
temido error "No se pudo establecer una conexión con la base de datos". CMS imprevisto
los problemas pueden surgir de aumentos repentinos de tráfico, que sobrecargan el servidor, provocando que se caiga
la base de datos, o restringir conexiones activas.
Servir un sitio estático es menos intensivo. En muchos casos, el servidor solo tiene que devolver
El gato les facilita que la escalabilidad según la demanda de tráfico sea simple. Aún es posible.
para colapsar un servidor web o sobrecargar APIs, pero se necesitarán considerablemente más concurrentes
solicitudes.
5. Seguridad Superior
Hay varias razones por las que alguien podría querer atacar tu sitio web. Tráfico
secuestro, publicidad ilegítima, enlace, suplantación de autenticidad y alojamiento de malware
permitir que un usuario no autorizado obtenga ganancias monetarias y/o de reconocimiento.
Un CMS abre una serie de vectores de ataque. El más obvio es la pantalla de inicio de sesión:
es tan seguro como la contraseña más débil del usuario. Tenga en cuenta que cualquier página que se esté ejecutando
el código del lado del servidor también ofrece posibles exploits, como enviar correos electrónicos de spam a través de
tu formulario de contacto. Puede que no sea obvio que alguien ha ganado acceso;
los peores culpables quieren permanecer ocultos.
Un sitio estático puede requerir poca o ninguna funcionalidad del lado del servidor. Algunos riesgos permanecen,
pero rara vez son tan problemáticos:
Alguien podría acceder a un servidor a través de SSH o FTP y desfigurar páginas o
cargar archivos. Sin embargo, generalmente es sencillo verificar si hay cambios (quizás
usando git status), limpiar todo el sitio y regenerarlo nuevamente.
Las API llamadas por un sitio estático están expuestas en el navegador y podrían ser explotadas.
de una manera idéntica a cualquier código del lado del servidor — como un correo electrónico de formulario. Bueno
prácticas de seguridad,CORS, yCSPayudará.
6. Consideraciones de Control del Cliente
Puedes pasar semanas construyendo un atractivo tema de CMS para que el cliente lo deseche.
¡sitio dentro de minutos de la entrega! Usar un CMS no es necesariamente fácil, y ofrece
poder considerable para los editores de contenido. Puedes bloquear derechos como el de los complementos
instalación, pero no evitará que alguien cambie las fuentes, introduciendo conflictos
colores, añadiendo fotografía de mala calidad, o corruptando el diseño.
Un sitio estático puede ser tan limitado o tan flexible como elijas. Si estás usando
Markdown o archivos similares hacen que los editores sean menos propensos a cometer errores o tener un impacto negativo
afectar el estilo de la página. Algunos extrañarán los paneles de administración de contenido del CMS, pero
puedes elegir entre:
1. utilizar su CMS existente y limpiar los datos antes de la generación, o
2. proporcionar flujos de trabajo más simples, como editar archivos basados en Git enStackEdito
[Link].
7. Control de versiones y pruebas
Los datos de la base de datos son volátiles. Un CMS permite a los usuarios agregar, eliminar o cambiar contenido.
por capricho. Borrar todo el sitio está a unos pocos clics de distancia. Puedes hacer copias de seguridad de las bases de datos.
pero, incluso si eso se hace regularmente, es probable que aún pierdas algunos datos.
Un sitio estático es generalmente más seguro. El contenido se puede almacenar en:
at les: se pueden controlar versiones utilizandoGito sistemas similares.
El contenido antiguo se conserva y los cambios se pueden deshacer rápidamente.
bases de datos privadas: los datos solo son necesarios cuando se genera el sitio, por lo que necesita
no estar expuesto en un servidor público.
Las pruebas también se vuelven más fáciles porque el sitio puede ser generado y previsualizado.
en cualquier lugar — incluso en la PC de un cliente.
Con un poco más de esfuerzo, puedes implementar sistemas de despliegue para construir el sitio.
de forma remota y actualizar el servidor en vivo cuando se haya enviado nuevo contenido a un
repositorio, revisado y aprobado.
Así que todo está bien en el mundo de los sitios estáticos. ¿O no? Lee mi publicación de seguimiento sobre7
Razones PARA NO utilizar un generador de sitios estáticos.
Para demostraciones prácticas de la construcción de sitios con un Generador de Sitios Estáticos, vea:
Cómo crear un sitio estático con Metalsmith
Comenzando con Eleventy
Cómo usar WordPress como un CMS sin cabeza para Eleventy
Craig Buckler
Craig es un consultor web freelance del Reino Unido que construyó su primera página para IE2.0 en 1995. Desde entonces ha estado
abogando por estándares, accesibilidad y técnicas de mejores prácticas en HTML5. Él ha creado empresas
especificaciones, sitios web y aplicaciones en línea para empresas y organizaciones, incluyendo el Reino Unido
Parlamento, el Parlamento Europeo, el Departamento de Energía y Cambio Climático, Microsoft, y más. Él es
ha escrito más de 1,000 artículos para SitePoint y puedes encontrarlo@craigbuckler.
Últimos trabajos remotos
Ingeniero Frontend Senior
SitePoint
reaccionarjavascript
.Net Desarrollador
Tecnología Global
.net sql
Ingeniero Senior - Equipo de Datos
IPinfo
bigquery python
Desarrollador Full Stack
Sin fondo
DesarrolloToArquitecto de OLS y OSS
Bit
javascript
Más trabajos remotos
Cómo usar ngrok para compartir un local
Sitio de desarrollo
PorCraig Buckler
Web
22 de abril de 2021
Compartir:
Este tutorial demuestra una forma de compartir tu servidor de desarrollo en localhost
con cualquiera, en cualquier lugar, usando ngrok para crear un túnel seguro a tu local
máquina.
Demostrando las últimas características de tu aplicación a gerentes de proyecto o clientes
no es fácil a menos que estén sentados a unos pocos escritorios de distancia. Puede ser posible cometer
los cambios y desplegar en un servidor de pruebas público, pero ese proceso puede ser
impráctico si solo estás buscando una opinión sobre el color de un widget o demostrando
¡la futilidad de su ridícula sugerencia!
Idealmente, necesitas alguna forma de compartir el acceso a una aplicación web que actualmente está en funcionamiento.
en tu servidor de desarrollo localhost. ngrok proporciona esa solución.
¿Qué es ngrok?
Su máquina de desarrollo puede estar conectada a una red segura detrás de un
Cortafuegos. Para sortear las restricciones de acceso, ngrok ejecuta un pequeño proceso cliente en
tu máquina que crea un túnel de conexión privado a la nube de ngrok
su localhostel servidor de desarrollo está mapeado a un [Link]
subdominio, al que un usuario remoto puede acceder. No es necesario exponer
puertos, configurar el reenvío o hacer otros cambios en la red.
El software cliente de ngrok está disponible para Windows, macOS y Linux.
¿Es ngrok seguro?
El túnel de conexión establecido por ngrok es seguro y solo puede transmitir datos.
al puerto localhost que tienes abierto. Sería difícil hacer algún daño,
pero ngrok es tan seguro como la aplicación que estás probando.
En la mayoría de los casos, usarás ngrok para otorgar acceso temporalmente a alguien emitiendo
ellos con una URL generada aleatoriamente. Es mejor asumir que cualquiera podría
acceda a su aplicación mientras el túnel esté abierto. Es posible que desee desactivar eso 'eliminar todo'
les" opción mientras ngrok está activo!
¿Cuánto cuesta ngrok?
Lo básicoservicio ngrokes gratis y permite hasta cuatro túneles y 40 conexiones
por minuto. Las opciones comerciales comienzan desde $5 al mes, proporcionando más
conexiones y dominios personalizados.
Descargar ngrok
Para empezar, [Link] tu navegador y haz clicRegístrateregistrarse. Un Google
o la cuenta de GitHub es la más fácil, pero puedes elegir el registro estándar con un
dirección de correo electrónico y contraseña. Se te enviará un enlace de verificación por correo electrónico.
Después de iniciar sesión, serás dirigido a lapanel de ngrokdonde puedes descargar el
cliente para tu sistema operativo.
Descarga y extrae el archivo, siguiendo cualquier instrucción específica para tu sistema operativo. Es
entonces es necesario agregar su token de autenticación ejecutando el comando mostrado
en la sección Conecta tu cuenta un poco más abajo en la página.
./ngrok authtoken<token>
Nota: Los usuarios de Windows ingresarán ./[Link].
Cómo usar ngrok
Lanza tu aplicación web usando su comando de inicio normal, luego nota el puerto
y si se está ejecutando en http o https. Para iniciar un nuevo túnel ngrok, ejecuta:
./ngrok<protocolo> <puerto>
Por ejemplo, si su sitio se sirve en[Link] , ingresar:
./ngrok http8888
La terminal se limpiará y mostrará el estado con dosForwardinghttpy
direcciones https, tales como[Link] Puedes pasar
ya sea URL a otra persona para que pueda acceder a su aplicación desde cualquier lugar.
El terminal muestra un registro de solicitudes mientras ngrok está activo.
¡Aprende PHP gratis!
Da el salto a la programación del lado del servidor con una cobertura completa
de PHP y MySQL.
Normalmente RRP $39.99 Suya absolutamente gratis
Nombre
Correo electrónico
Obtén el libro gratis
El panel de estado de ngrok [Link]/puntos_de_acceso/estadotambién
muestra una lista de URLs activas actualmente y direcciones IP de clientes. (Puede que necesites
actualiza el navegador para actualizarlo.)
Una vez que hayas terminado, cierra ngrok presionandoCtrl| Cmd+ Cen tu terminal.
Más ayuda y opciones están disponibles al ingresar:
./ngrokhelp
Alternativas a ngrok
ngrok es posiblemente la forma más fácil y conocida de tunelización de localhost
servicio, pero las opciones alternativas incluyen:
LocalXposeun servicio comercial con opciones gratuitas. Se requiere registrarse, pero
Están disponibles clientes basados en terminal y de interfaz gráfica de usuario.
[Link] servicio gratuito que funciona a través de SSH, por lo que no se necesita cliente ni registro
necesario.
túnel localun cliente de [Link] de código abierto. No es necesario registrarse.
JPRQun cliente de Python de código abierto. No es necesario registrarse.
sishun cliente de contenedor basado en Docker de código abierto. No se requiere registro.
ngrok y servicios de túneles seguros similares pueden revolucionar la forma en que demuestras
aplicaciones web a otros trabajadores remotos. Ayudará a probar y reducir la frustración
retrasos en los comentarios.
Craig Buckler
Craig es un consultor web freelance del Reino Unido que construyó su primera página para IE2.0 en 1995. Desde entonces ha estado
abogar por estándares, accesibilidad y técnicas de HTML5 de mejor práctica. Ha creado empresa
especificaciones, sitios web y aplicaciones en línea para empresas y organizaciones, incluido el Reino Unido
Parlamento, el Parlamento Europeo, el Departamento de Energía y Cambio Climático, Microsoft y más. Él está
ha escrito más de 1,000 artículos para SitePoint y puedes encontrarlo@craigbuckler.
Últimos trabajos remotos
Ingeniero Frontend Senior
SitePoint
reaccionarjavascript
.Net Desarrollador
Tecnología Global
.net sql
Ingeniero Senior - Equipo de Datos
IPinfo
bigquery python
Desarrollador Full Stack
Sin fondo
DesarrolloToArquitecto de OLS y OSS
Bit
javascript
Más trabajos remotos
Cosas que hacemos Acerca de Contacto
Premium Nuestra historia Contáctanos
Boletines Términos de uso Preguntas frecuentes
Foros Política de privacidad Publica tu libro con nosotros
Ofertas Membresías corporativas Escribe un artículo para nosotros
Trabajos Remotos Anunciar
Conectar