Visual Studio Code: Um Guia para Usuários Avançados

PorMichael Wanyoike

Web

15 de abril de 2020

Compartilhar:

Neste guia, você aprenderá como aproveitar o Visual Studio Code para
impulsione seu fluxo de trabalho de desenvolvimento.

Este artigo é escrito para iniciantes do Visual Studio Code e usuários que buscam obter
mais fora do aplicativo. O VS Code, como é comumente conhecido, é considerado um

editor de código "leve". Em comparação com um desenvolvimento integrado completo

edições de ambiente (IDE) que ocupam gigabytes de espaço em disco, o VS Code usa
menos de 200MB quando instalado.

Apesar do termo "leve", o Visual Studio Code oferece um número massivo de

recursos que continuam aumentando e melhorando a cada nova atualização. Para isso
guia, cobriremos os recursos mais utilizados. Todo programador tem seu
conjunto de ferramentas próprio que eles atualizam sempre que descobrem novos fluxos de trabalho. Se você quiser

Para aprender todas as ferramentas e recursos que o VS Code tem a oferecer, confira o site oficial.

documentação. Além disso, você pode querer acompanharatualizaçõespara novos e

recursos melhorados.

Pré-requisitos

Para seguir este guia, você precisa ser proficiente em pelo menos uma linguagem de programação.
linguagem e estrutura. Você também precisa estar familiarizado com a versionação do seu
código do projeto comgitVocê também precisará ter uma conta em um repositório remoto
plataforma como o GitHub. Eu recomendo que você configureChaves SSHpara se conectar com o seu
repositório remoto.

Usaremos um mí[Link] para demonstrar recursos do VS Code. Se você está

novo nisso, não se preocupe — o foco do guia não é na estrutura ou na linguagem
usado. Você pode transferir as habilidades que ensinaremos para qualquer linguagem e estrutura que você

trabalhar com o Visual Studio Code.

Um pouco de história

Não faz muito tempo, esses eram os ambientes de desenvolvimento totalmente integrados em

offer:

IDE do Visual Studio

NetBeans
Eclipse
IntelliJ IDEA

Essas plataformas fornecem o fluxo de trabalho completo de desenvolvimento, desde a codificação até

teste e implantação. Eles analisam o código, destacam erros e têm todo tipo de
outras características que oferecem assistência. Eles também contêm muitas funcionalidades que
a maioria dos desenvolvedores não usa, embora sejam essenciais para algumas equipes. Como resultado,

essas plataformas ocuparam muito espaço em disco e eram lentas para iniciar. Muitas

os desenvolvedores preferiam usar editores de texto avançados, comoemacsevimescrever

seu código em.

Em breve, uma nova safra de editores de código independentes de plataforma chegou. Esses leves

os editores forneceram muitos recursos que eram anteriormente exclusivos de IDEs. Eu listei

eles abaixo na ordem em que foram lançados:

Sublime TextJulho de 2013

 [Link] de 2015
Visual Studio CodeAbril de 2016

Os desenvolvedores de Mac tiveram acesso aTextMate, que foi lançado em outubro de 2004.
O sistema de trechos usado por todos esses editores originou-se do TextMate.
De acordo com uma pesquisa de desenvolvedores feita porStack OverFlowem 2019, Visual Studio
O Code é o ambiente de desenvolvimento de código mais popular, com 50,7% de uso.
O Visual Studio IDE fica em segundo lugar, e o NotePad++ fica em terceiro.

Isso é suficiente de história e estatísticas. Vamos mostrar como usar o Visual Studio Code.

recursos.

Configuração e Atualizações

O instalador de pacotes do Visual Studio Code tem menos de 100MB e consome menos
mais de 200MB quando totalmente instalado. Quando você visita obaixarpágina, irá detectar
seu sistema operacional e oferecer o link de download correto.

Atualizar o VS Code é fácil. Quando uma atualização está disponível, ele exibe uma notificação.

Para usuários do Windows, você precisará clicar na notificação para baixar.

e instale a versão mais recente. O processo de download ocorre em segundo plano
enquanto você está trabalhando. Quando estiver pronto para instalar, um prompt de reinício aparecerá.

Clicar aqui irá instalar a atualização para você e reiniciar o VS Code.

Para distribuições baseadas em Ubuntu, clicar na notificação de atualização simplesmente

abra o site para você baixar o instalador mais recente. Uma maneira muito mais fácil é
basta executar sudo apt update && sudo apt upgrade -y. Isso vai
atualize todos os pacotes do Linux instalados, incluindo o Visual Studio Code. A razão para isso
funciona porque o VS Code adicionou seu repositório ao seu registro de repositório de pacotes durante o

instalação inicial. Você pode encontrar as informações do repositório neste caminho:

/etc/apt/[Link].d/[Link].
Interface do Usuário

Vamos primeiro nos familiarizar com a interface do usuário:

Fonte da imagem

A interface do usuário do Visual Studio Code é dividida em cinco áreas principais que você pode

ajustar facilmente.

Barra de Atividades: permite que você alterne entre visualizações: explorador, pesquisa, versão

controle, depuração e extensões.

Side Bar: contains the active view.
Editor: é aqui que você edita arquivos e visualiza arquivos markdown. Você pode
organize vários arquivos abertos lado a lado.
Painel: exibe diferentes painéis: terminal integrado, painéis de saída para depuração
informações, erros e avisos.
 Status: displays information about the currently opened project and le. Also
contém botões para executar ações de controle de versão, e
habilitar/desabilitar recursos da extensão.

Há também a barra do menu superior onde você pode acessar o sistema de menu do editor.

Para usuários do Linux, o terminal integrado padrão provavelmente será o shell Bash.
Usuários do Windows, é PowerShell. Felizmente, há um seletor de shell localizado dentro
o menu suspenso do terminal que permitirá que você escolha um shell diferente. Se instalado,
você pode escolher qualquer uma das seguintes opções:

Prompt de Comando
PowerShell
PowerShell Core
Git Bash
WSL Bash

Trabalhando com Projetos

Ao contrário dos IDEs completos, o Visual Studio Code não oferece criação de projetos nem disponibiliza

modelos de projeto da maneira tradicional. Funciona simplesmente com pastas. No meu Linux
máquina de desenvolvimento, estou usando o seguinte padrão de pasta para armazenar e gerenciar

my projects:

/home/{username}/Projects/{company-name}/{repo-provider}/{project-n

A pasta Projetos é o que eu me refiro como o local de trabalho. Como um freelancer

escritor e desenvolvedor, eu separo projetos com base na empresa para a qual estou trabalhando,

e qual repositório estou usando. Para projetos pessoais, eu os armazeno sob o meu próprio

nome da "empresa" fictícia. Para projetos com os quais experimento para aprender
fins, e que não pretendo manter por muito tempo, vou apenas usar um nome como
playortutsas como um substituto para {repo-provider}.
 Aprenda PHP de graça!
Faça a transição para programação do lado do servidor com uma cobertura abrangente
de PHP e MySQL.

Normalmente RRP $39,99 Seu absolutamente grátis

Nome

Email

Obtenha o livro grátis

Se você quiser criar um novo projeto e abri-lo no VS Code, pode usar o

siga os passos. Abra um terminal e execute os seguintes comandos:

$mkdirvscode-demo
$cdvscode-demo
# Iniciar o Visual Studio Code
$ código.

Você também pode fazer isso no File Explorer. Quando você acessar o menu de contexto do mouse,

você deve conseguir abrir qualquer pasta no VS Code.

Se você quiser criar um novo projeto vinculado a um repositório remoto, é mais fácil criar um.
no site do repositório — por exemplo, GitHubouBitBucket.
Observe todos os campos que foram preenchidos e selecionados. Em seguida, vá para o
terminal e execute o seguinte:

Navegar para a pasta workspace/company/repo

$cdProjects/sitepoint/github/

# Clone o projeto para sua máquina

$gitclone git@[Link]:{inserir-nome-de-usuário-aqui}/vscode-nextjs-dem

# Abrir projeto no VS Code

$cdvscode-nextjs-demo
$ código.
Uma vez que o editor esteja em funcionamento, você pode iniciar o terminal integrado usando

o atalho de teclado Ctrl+~(tecla til). Use os seguintes comandos para

gerar [Link] e instalar pacotes:

# Generate `[Link]` file with default settings

$npminit -y

# Instalar dependências de pacotes

$npm install next react react-dom

Em seguida, abra o [Link] e substitua a seção scripts por isto:

"scripts":{
"dev":"next",
"build":"next build",
"start":"next start"
}

Toda a janela do Visual Studio Code deve parecer assim:

Antes de olharmos para a próxima seção, gostaria de mencionar que o VS Code também suporta
o conceito deespaços de trabalho multi-raiz. Se você está trabalhando com projetos relacionados —
front-end, back-end, docs etc. — você pode gerenciá-los todos em um único espaço de trabalho

dentro de um editor. Isso tornará mais fácil manter seu código fonte e
documentação em sincronia.

Controle de Versão com Git

O Visual Studio Code vem com um gerenciador de controle de versão Git embutido. Ele fornece um

Interface de UI onde você pode preparar, cometer, criar novos ramos e alternar para
existentes. Vamos commitar as mudanças que acabamos de fazer em nosso projeto. Na Atividade

barra, abra o Painel de Controle de Fonte e localize o botão Adicionar Todas as Alterações
conforme mostrado abaixo.
Clique nele. Em seguida, insira a mensagem de commit "Instalou as dependências do [Link]", então

clique no botão Commit no topo. Ele tem o ícone de marca de verificação. Isso irá confirmar

as novas mudanças. Se você olhar para o status localizado na parte inferior, verá várias
ícones de status no canto esquerdo. O 0 significa que não há nada para extrair
o repositório remoto. O 1 significa que você tem um commit que precisa enviar para

seu repositório remoto. Clicar nele exibirá um prompt sobre a ação que será realizada
lugar. Clique em OK para puxar e enviar seu código. Isso deve sincronizar seu local

repositório com o repositório remoto.

Para criar um novo branch ou mudar para um branch existente, basta clicar no branch
nome mestre na barra de status, canto inferior esquerdo. Isso fará com que um ramo apareça

painel para você tomar uma ação.

Não deixe de conferir as seguintes extensões para uma experiência ainda melhor com o Git:

Git Lens
Histórico do Git

O suporte a um tipo diferente de SCM, como SVN, pode ser adicionado através da instalação do

extensão SCM relevante do mercado.

Criando e Executando Código

Na Barra de Atividades, retorne ao Painel do Explorador e use a Nova Pasta

botão para criar as pastas no diretório raiz do projeto. Selecione esta pasta
e use o botão Novo Arquivo para criar o arquivo pages/[Link]. Copie o seguinte
code:

funçãoPaginaInicial() {
<div>Bem-vindo ao [Link]!</div>
 }

export defaultHomePage;

Com o Painel Explorer, você deve ver uma seção chamada Scripts NPM. Expanda
isto e passe o mouse sobre dev. Um botão de execução (ícone de reprodução) aparecerá ao lado. Clique em

e isso iniciará um servidor de desenvolvimento [Link] dentro do Terminal Integrado.

Deve levar alguns segundos para iniciar. UseCtrl+ Cliqueno URL

[Link] abri-lo no seu navegador. A página deve se abrir
exibindo com sucesso a mensagem 'Bem-vindo'. Na próxima seção, analisaremos
como podemos mudar as preferências do Visual Studio Code.

User and Workspace Settings

Para acessar as configurações de preferência do VS Code, use a tecla de atalhoCtrl+ , Você pode

também acesse-o através do comando de menu assim:

No Windows/Linux – Arquivo> Preferências> Configurações

No macOS – Código>Preferências>Configurações
Por padrão, uma interface gráfica do editor de configurações deve aparecer. Isso ajuda os usuários

faça alterações nas preferências facilmente, pois existem milhares de configurações editáveis
que estão disponíveis. O editor de Configurações fornece nomes amigáveis para o usuário e

description for what each setting does. In addition, related settings have been
agrupados e há uma barra de pesquisa para localizar uma configuração específica.

Ao alterar as configurações usando o editor, preste atenção ao escopo ativo em

top. Observe que nem todas as configurações podem ser feitas através da interface gráfica.
Para isso, você precisa editar o arquivo [Link] diretamente. À medida que você rola para baixo

theSettings editor, you’ll come across a shortcut that will take you to this le.

Existem dois escopos diferentes que as configurações do Visual Studio Code são classificadas

sob:
 User Settings: Settings are stored under user account. They will take effect
em todos os projetos em que você trabalha.

Espaço de trabalho: As configurações são armazenadas dentro da pasta do projeto ou do espaço de trabalho. Elas vão
aplique-se apenas naquele projeto específico.

Dependendo da sua plataforma, você pode localizar as configurações do usuário do VS Code em

as seguintes localizações:

Windows:%APPDATA%\Code\User\[Link]
macOS:$HOME/Biblioteca/Aplicação
Support/Code/User/[Link]
Linux:$HOME/.config/Code/User/[Link]

Para o Workspace, basta criar uma pasta .vscode na raiz do seu projeto. Então
crie o arquivo [Link] dentro desta pasta. Se estiver trabalhando com as Configurações

paineldeeditor, ele fará isso por você automaticamente quando você mudar as configurações em
oEscopoDoTrabalho. Aqui está um subconjunto das configurações globais que prefiro trabalhar:

{
"[Link]":false,
"[Link]":"on",
"[Link]":false,
"[Link]":true,
"[Link]":"always",
"[Link]":false,
"[Link]":"doubleClick",
"[Link]":"default",
"[Link]":true,
"[Link]":"[Link] Code",
"[Link]":true,
"[Link]":2,
"[Link]":false
}
Costumo trabalhar em vários projetos simultaneamente, por isso a configuração
[Link] me permite abrir novas pastas de projeto
sem fechar (substituir) o ativo. Para [Link],
I’ve set it toPrettier, which is an extension I have installed. We’ll discuss this in a
seção posterior em breve. A seguir, vamos olhar para as associações linguísticas.

Associação Linguística

Eu faço muitos projetos usando React. Ultimamente, a maioria dos frameworks React gera

componentes usam a extensão .jsextensão em vez de .jsx. Como resultado, a formatação

e a coloração de sintaxe se torna um problema quando você começa a escrever código JSX. Para

Para isso, você precisa associar arquivos .js ao JavaScript React. Você pode

você pode facilmente fazer isso mudando o Modo de Linguagem através doControlar+ Mudança+ P
painel de comando. Você também pode atualizar [Link] adicionando isso

con guration:

{
"[Link]":{
"*.js":"javascriptreact"
}
}

Na próxima vez que você abrir um arquivo JS, ele será tratado como um arquivo React JSX. Eu especifiquei

isso nas minhas configurações globais, uma vez que frequentemente trabalho com projetos React. Infelizmente,

fazer isso quebra um recurso embutido chamadoEmmetÉ um plugin popular que ajuda
os desenvolvedores completam automaticamente o código HTML e CSS de uma maneira muito intuitiva. Você pode x

este problema adicionando a seguinte configuração em [Link]:

{
"[Link]":{
"javascript":"javascriptreact"
}
}
Na próxima vez que você tiver problemas para ativar o Emmet para uma extensão de le específica ou

idioma, verifique se pode ser resolvido adicionando a associação de idioma em

[Link]. For more information, check out theoficial
documentação para Emmet do VS Code.

Atalhos de Teclado

Até agora, cobrimos dois atalhos de teclado:

Ctrl+ , : Open settings

Ctrl+ Mudança+ PAbrir paleta de comandos

A Paleta de Comandos oferece acesso a todo o Visual Studio Code.

funcionalidade incluindo atalhos de teclado para operações comuns. Se você instalar
uma extensão, quaisquer ações acionadas manualmente serão listadas aqui. No entanto, para

extensões como Prettier e Beautify, elas usarão o mesmo comando Format.

O Visual Studio Code também possui seu próprio plugin de formatação embutido. Para especificar qual

o plugin deve executar a ação, você precisa ir para o editor de configurações e

altere a configuração do Formatador Padrão. Aqui está um exemplo de como eu o configurei

na minha

{
"[Link]":"[Link] Code"
}

Você também pode especificar um formatador diferente para um modo de linguagem específico. Aqui estão

vários atalhos de teclado que você precisa memorizar:

Ctrl+ Pdeixará você navegar para qualquer le ou símbolo digitando seu nome
Ctrl+ Abavai passar você pelo último conjunto de arquivos abertos

Ctrl+ Turno+ Opermitirá que você navegue para um símbolo específico em um arquivo

Ctrl+ Gdeixará você navegar para uma linha específica em um arquivo

Aqui estão meus comandos favoritos que uso frequentemente ao escrever código:

Ctrl+ Dpressione várias vezes para selecionar palavras-chave idênticas. Quando você
comece a digitar, renomeia todas as palavras-chave selecionadas

Ctrl+ Mudança+ Cima/BaixoAdicione o cursor acima ou abaixo para editar

várias linhas de uma vez

Alt+ Turno+ CliqueAdicionar cursor em múltiplas localizações para editar em

seções diferentes de código simultaneamente

Ctrl+ JAdicione 2 ou mais linhas em uma. Funciona perfeitamente se você tiver um
formatador ativo enquanto você edita o código

Ctrl+ FPesquisar uma palavra-chave no arquivo atual

Ctrl+ HPesquisar e substituir no arquivo atual

Ctrl+ Trocar+ FPesquisar em todos os arquivos

Se você visitar as opções de menu, encontrará teclas de atalho para a maioria dos comandos.

Pessoalmente, nunca me acostumei com algumas das teclas de atalho padrão que vêm
com Visual Studio Code devido ao uso de editores como Atom por um longo tempo. O
a solução que encontrei foi simplesmente instalar oMapa de Teclas AtomIsso me permite usar o

atalhoCtrl+ \ para alternar a Barra Lateral. Se você quiser editar o teclado

para personalizar suas teclas de atalho, basta ir ao menu em Arquivo>Preferências>Teclado

Shortcuts. (Code>Preferences>Keyboard Shortcutson macOS).

 8,7 mil visualizações

Recursos do Editor de Código

Nesta seção, vamos dar uma olhada rápida nas várias funcionalidades amigáveis para desenvolvedores do Visual

O Studio Code oferece ajuda para você escrever mais rápido, limpo e mais manutenível.

código.

Intellisense
Este é um recurso popular também conhecido como “completação de código” ou autocompletar.

fora da caixa, o VS Code fornece Intellisense para:

JavaScript, TypeScript
HTML
CSS, SCSS e Less

Ao digitar seu código, um pop-up com uma lista de opções possíveis aparecerá. Quanto mais
quanto mais você digita, mais curta a lista fica. Você pode pressionarEntrarouAbauma vez que seu

a palavra-chave pretendida é destacada para completar automaticamente seu código. PressionandoEscirá

remova o popup. Inserindo um . no final de uma palavra-chave ou pressionandoCtrl+

a barra de espaço irá acionar o popup do IntelliSense para aparecer.
 7,9 mil visualizações

Se você está trabalhando com um idioma que não é suportado por padrão, você pode
instalar uma extensão de idioma domercadopara ativar o IntelliSense para o seu
linguagem de programação desejada. Confira odocumentos oficiaispara saber mais sobre como
você pode personalizar o IntelliSense.

Trechos
Digitando código repetitivo, como instruções if, loops for e componentes
a declaração pode ser um pouco cansativa. Você pode acabar copiando e colando código
para trabalhar mais rápido. Felizmente, o Visual Studio Code oferece um recurso chamado

Trechos, que são simplesmente modelos de código. Por exemplo, em vez de digitar
[Link], basta digitar log e o IntelliSense irá sugerir a inserção do snippet
para você.

Existem muitos trechos que você pode acessar desde que tenha memorizado o
abreviatura ou palavra-chave que aciona a inserção de snippet. Como você é novo nisso, você
pode acessar uma lista de todos os trechos disponíveis via Paleta de Comandos>Inserir Trechos:
Scroll up and down to view the entire list. Take note that most snippets have
paradas de tabulação que permitem substituir as seções relevantes do código ao inserir
eles. Você pode encontrar mais extensões de snippet no mercado. Você também pode
crie o seu próprio. Issoartigomostra como fazer os dois. Você pode conferir o
documentos oficiaispara mais informações sobre como definir seus próprios trechos.

Formatação
Frequentemente, ao digitar ou colar código de diferentes fontes, tendemos a misturar a codificação

estilos. Por exemplo:

indentação com espaço vs tabs

terminando com ponto e vírgula;

aspas duplas ou aspas simples

A formatação é importante, pois torna o código legível. No entanto, pode ser demorada.
consumir quando você se depara com grandes seções de código não formatado. Felizmente,

O Visual Studio Code pode realizar a formatação para você com um único comando. Você
can execute the formatting command via theCommand Palette. Visual Studio
O código suporta formatação para os seguintes idiomas por padrão:

JavaScript
TypeScript
JSON
HTML

Você pode personalizar o comportamento de formatação do Visual Studio Code alterando o

following settings to trueorfalse:

[Link]: format the line after typing

[Link]: format a le on save
[Link]: format the pasted content

No entanto, os formatadores embutidos podem não se conformar ao seu estilo de codificação. Se você estiver

trabalhando com frameworks como React, Vue ou Angular, você encontrará que o embutido
Os formatadores tendem a atrapalhar seu código. Você pode corrigir isso desabilitando a formatação para

uma língua específica:

"[Link]":false

No entanto, a melhor solução é instalar uma extensão de formatação do

mercado. Meu favorito é [Prettier]([Link]
itemName=[Link] Code), as it supports a huge number of languages
incluindo:

Fluxo · JSX · JSON

CSS · SCSS · Less
 Vue · Angular
GraphQL · Markdown · YAML

Após instalá-lo, você precisará defini-lo como o formatador padrão:

{
"[Link]":"[Link] Code",
"[javascript]":{
"[Link]":"[Link] Code"
}
}

Também é recomendado que você instale o prettierpackage localmente como um desenvolvedor.

dependency:

npm install prettier -D --save-exact

As opções de formatação padrão que o Prettier impõe podem funcionar para você. Se não funcionarem, você

pode personalizar criando um arquivo de configuração .prettierrc no diretório raiz

do seu projeto ou no seu diretório pessoal. Você pode colocar a sua formatação personalizada

regras aqui. Aqui está um exemplo:

{
"trailingComma":"all",
"tabWidth":2,
"semi":false,
"singleQuote":true
}

Feel free to check out other extensões de formataçãoNo entanto, você encontrará o Prettier para
seja o mais popular.

Lintagem
ALint, ou Linter, é uma ferramenta que analisa seu código e verifica erros de sintaxe,
problemas de estilo, chamadas para variáveis não declaradas, uso de funções obsoletas
uso indevido de escopo e muitos outros problemas. O Visual Studio Code não vem

enviado com qualquer Linter. No entanto, facilita a configuração de um para o

a linguagem de programação que você está usando. Por exemplo, se você estiver trabalhando em novo

projeto em Python, você receberá umindicaçãoinstalar um para você. Você também pode abrir o

Paleta de ComandosCtrl+ Turno+ P) e selecione o Python: Selecionar Linter

comando.

Para JavaScript, você precisará instalar uma extensão comoESLintqual é o

mais popular. Esta extensão requer que você instale o ESLint como uma dependência de desenvolvimento.

You may also need one or more ESLint plugins that will help you lint the coding
estilo e estrutura que você está usando. Você pode conferir nossoguiasobre como

configurar o ESLint. Há também outrosferramentas de lintervocê pode fazer o check-out. Meu

a recomendação é usar o ESLint, pois é mais fácil de configurar e oferece suporte
more JavaScript styles and frameworks.

Uma vez que você tenha configurado a ferramenta de linting, o VS Code irá automaticamente analisar seu código a cada

tempo que você salva o le. Você também deve atualizar seus scripts [Link] para
inclua um comando para executar a ferramenta de lint.

Depuração
Se você usa declarações de impressão para depurar, deve parar imediatamente, pois há uma
uma maneira melhor de depurar seu código. Com o VS Code, você pode definir pontos de interrupção e

inspecionar variáveis enquanto seu código está sendo executado.

 Fonte da imagem

Check out ourguide on debugging JavaScript projects with VS Code and

Chrome Debugger para instruções passo a passo sobre como depurar seu código.

Summary

Chegamos ao fim do guia. Como mencionado anteriormente, as informações aqui estarão

ajudar você a iniciar sua jornada para melhorar seu fluxo de trabalho de codificação com o Visual

Studio Code. I recommend you check out ourtop 10 must-have extensions for VS
Código. Embora a maioria das ferramentas do VS Code seja fácil de aprender e integrar ao seu
fluxo de trabalho, outros precisam de algum tempo para se adaptar e se acostumar. No entanto,

dominar os recursos do VS Code fará de você um programador eficiente e melhor

desenvolvedor.

Se você quiser alcançar o pico absoluto de desempenho produtivo com Visual

Studio Code, confira o Visual Studio Code: Edição e Depuração de Ponta a Ponta
Ferramentas para Desenvolvedores Web. É um livro fantástico da Wiley que você pode ler
online (ou offline!) na nossa biblioteca Premium.
 Michael Wanyoike

Eu escrevo código limpo, legível e modular. Adoro aprender novas tecnologias que trazem eficiências e
aumentou a produtividade no meu fluxo de trabalho.

Latest Remote Jobs

Engenheiro Frontend Sênior

SitePoint
reagir javascript

.Net Developer
Tecnologia Global
.net sql

Engenheiro Sênior - Equipe de Dados

IPinfo
bigquery python

Desenvolvedor Full Stack

Sem fundo

DesenvolvedorToArquitetura de OLS e OSS

Bit
javascript

More Remote Jobs

7 Motivos para NÃO Usar um Site Estático

Gerador
PorCraig Buckler

Web

6 de maio de 2021

Compartilhar:
Geradores de site estático (SSGs) são populares e oferecem muitos benefícios, mas isso
o artigo discute razões pelas quais eles podem não ser uma substituição adequada para o seu
sistema de gerenciamento de conteúdo (CMS).

Em meuartigo anterior, nós discutimos como seu site poderia se beneficiar ao usar um
static site generator:

Um site estático é uma coleção de páginas contidas em arquivos HTML básicos.

poderia escrevê-los à mão em um editor de texto, mas gerenciar ativos e repetidos
elementos como a navegação podem se tornar problemáticos.
Um sistema de gestão de conteúdo armazena o conteúdo da página em um banco de dados e

fornece instalações para editar e aplicar temas. A gestão se torna mais fácil em
o custo da flexibilidade, desempenho, requisitos do servidor, segurança, e
cópias de segurança.
Um gerador de site estático é um compromisso entre usar um código estático manualmente.

site e um CMS completo. Você gera o site completo uma vez usando dados brutos (como
Arquivos Markdown e templates. O conjunto resultante de arquivos é transferido para
seu servidor ao vivo.

O termo "Jamstack" (JavaScript, APIs e Markup) é usado em relação a

sites estáticos. Refere-se ao aumento de frameworks, funções sem servidor, e
ferramentas associadas que geram arquivos estáticos, mas permitem interatividade complexa.
ser adicionado.

Os geradores de sites estáticos populares incluemJekyll, Eleventy, Gatsby, Hugoe

MetalúrgicoSSGs estão disponíveis para a maioria das linguagens; vejaStaticGenpara muitos
mais.

As SSGs parecem oferecer os benefícios tanto do CMS quanto do mundo estático, mas eles podem não

ser adequado para cada projeto ...

1. Você está por conta própria

Você não vai longe usando um gerador de site estático sem algum desenvolvimento
especialização. O processo é mais difícil do que usar um CMS, há menos
recursos, e você pode ter dificuldades para encontrar plugins e modelos pré-construídos.

Compare isso com o WordPress. Um usuário não técnico pode precisar de instalação
assistência, mas, uma vez que isso esteja completo, eles podem editar um site e instalar um dos

milhares de temas e plugins disponíveis. Eles podem não ter o melhor

site sob medida, mas eles estão operando com intervenção mínima.

2. Paralisia da Escolha

Há muitosgeradores de sites estáticos, mas até mesmo as ferramentas mais populares são usadas
por uma pequena proporção da comunidade da web. Você vai precisar de tempo para pesquisar,

investigue e avalie as opções. Um dos primeiros SSGs foi o baseado em Ruby

Jekyllmas, embora você não precise necessariamente de experiência em Ruby, irá ajudar se você tiver
usou a linguagem antes.

Existem muitos CMSs, mas há uma escolha óbvia: WordPress. Ele alimenta mais
mais de 40% da Web, então a ajuda é abundante. Novamente, será útil se você tiver um pouco de PHP
experiência, mas mesmo um não-desenvolvedor pode criar um site razoável usando ferramentas pré-fabricadas.

temas e plugins prontos para uso.

3. O Tempo de Configuração Inicial

Criar seu primeiro site estático levará tempo. Você precisará aprender o processo de construção,
e muito do código do template precisará ser desenvolvido. Scripts de implantação
também pode ser necessário.

Desenvolver um tema de CMS personalizado também pode ser complicado, mas os pré-construídos

modelos estão disponíveis e a assistência é mais fácil de encontrar. O desenvolvimento adicional pode

não será necessário após a instalação inicial.

4. Sem Interface de Administração

Os clientes podem ser cautelosos quando se deparam com uma interface de CMS complexa. Perguntando a eles

Criar e editar um conjunto de arquivos Markdown pode aterrorizar muitos. Você pode fazer o

processo mais fácil, talvez:

usando seu CMS existente como uma fonte de dados SSG, ou

fornecendo fluxos de trabalho mais simples, como editar arquivos baseados em Git emStackEditou

[Link].

Mas isso impactará ainda mais o seu tempo de desenvolvimento inicial.

5. Website Consistency

Sites estáticos são flexíveis: qualquer coisa contida no conteúdo fonte pode ser renderizada

on a web page. Users may be able to include scripts, widgets, or numerous

itens indesejados.

Um CMS pode ser configurado para restringir o usuário. O conteúdo normalmente está vinculado a um

banco de dados com campos específicos, então os painéis de administração solicitam ao usuário que insira um

title, body content, excerpts, featured images, and so on. Even if the user enters
algo em um campo inesperado, não aparecerá no site a menos que seja
implementado dentro do modelo de tema.

6. Gerenciando Grandes Sites

Considere um site com milhares de páginas, publicações de conteúdo diárias, em tempo real
notícias de última hora, e dezenas de autores em múltiplas localizações. É possível que
gerenciar conteúdo usando um gerador de site estático, mas:
 A edição de conteúdo e a publicação podem ser mais complicadas. Os editores podem precisar

acesso ao repositório Git ou pastas compartilhadas em vez de uma simples web ou

interface do aplicativo.

As atualizações em tempo real estão atrasadas porque o site precisa ser reconstruído, testado e

implantado.
Os tempos de construção podem aumentar rapidamente e a implantação pode se tornar

pesado.

Os geradores de sites estáticos são talvez mais adequados para sites que contêm no máximo um

few hundred pages with a couple of new posts every week. Automated build and
processos de implantação serão necessários, e você pode chegar a um ponto onde um CMS

torna-se uma opção mais prática.

7. Funcionalidade do lado do servidor

Sites estáticos são perfeitos para páginas de conteúdo, mas a situação se torna mais
desafiador quando você requer logins de usuário, preenchimento de formulários, facilidades de busca, discussão

fóruns ou outra interatividade de servidor e banco de dados. As opções incluem:

1. Adicionando um componente de terceiros, do lado do cliente, comoBusca em Angoliaou

Comentários do Disqus.

2. Criando suas próprias APIs de servidor (ou sem servidor) que podem ser consumidas por
JavaScript do lado do cliente para adicionar recursos necessários.

3. Gerando páginas contendo <?php ... ?> ou código do lado do servidor semelhante

blocos.
4. Mudando para um framework [Link], que renderiza conteúdo estático
onde possível, mas também permite processamento no lado do servidor.

No entanto, o tempo de desenvolvimento, a complexidade da construção, as implicações de segurança, os testes

o esforço e a despesa irão aumentar. Contraste isso com a instalação de um WordPress apropriado.

plugin que pode implementar funcionalidade do lado do cliente ou do servidor em alguns

minutos.
Um Site Estático é Certo para Você?

Antes de tomar qualquer decisão, examine:

Aprenda PHP de graça!

Dê o salto para a programação do lado do servidor com uma cobertura abrangente
de PHP e MySQL.

Normalmente RRP $39,99Seu absolutamente grátis

Nome

Email

Obtenha o livro grátis

seus requisitos de projeto, tamanho, complexidade, frequência de atualização, etc.

seus usuários, sua localização, expectativas, etc.

as habilidades de desenvolvimento da sua equipe,

quaisquer fatores de hospedagem e/ou implantação.

A vasta maioria dos sites raramente excede algumas dezenas de páginas, recebendo com pouca frequência

atualizações e dependem de um desenvolvedor para fazer essas alterações. Um CMS geralmente é

overkill, então um gerador de site estático poderia simplificar o desenvolvimento e reduzir custos.

Persuadir seu cliente a abandonar seus painéis de administração de conteúdo pode ser um
tarefa mais difícil!
Para demonstrações práticas de construção de sites com um gerador de sites estáticos, veja:

Como Criar um Site Estático com Metalsmith

Começando com o Eleventy
Como Usar o WordPress como um CMS Headless para Eleventy
Manipulação de Formulários para Sites Jamstack Usando Trabalhadores Cloudflare

Craig Buckler

Craig é um consultor de web freelancer do Reino Unido que criou sua primeira página para IE2.0 em 1995. Desde então, ele tem estado
defendendo padrões, acessibilidade e técnicas de HTML5 de melhores práticas. Ele criou empresas
especificações, sites e aplicações online para empresas e organizações, incluindo o Reino Unido
Parlamento, o Parlamento Europeu, o Departamento de Energia e Mudança Climática, a Microsoft, e mais. Ele está
escreveu mais de 1.000 artigos para o SitePoint e você pode encontrá-lo@craigbuckler.

Últimos Trabalhos Remotos

Engenheiro de Frontend Sênior

SitePoint
reagir javascript

.Net Developer
Tecnologia Global
.net sql

Engenheiro Sênior - Equipe de Dados

IPinfo
bigquery python

Desenvolvedor Full Stack

Sem fundo

DesenvolvedorToArquiteto de OLS e OSS

Bit
javascript

Mais Vagas Remotas

 7 Razões para Usar um Gerador de Sites Estáticos

PorCraig Buckler

JavaScript

28 de abril de 2021

Share:

Os geradores de sites estáticos (SSGs) tornaram-se cada vez mais populares ao longo do passado

década. Este artigo discute como seu site poderia se beneficiar do desenvolvedor-
processos de construção amigáveis, implantações mais fáceis, desempenho melhorado, e

melhor segurança oferecida por um site estático.

Primeiro, vamos estabelecer o que queremos dizer com o termo “gerador de site estático” …

O que é um Site Estático?

Lembre-se do primeiro website que você construiu. A maioria dos desenvolvedores começa criando um

série de páginas contidas em arquivos HTML individuais. Cada um chamará ativos

como imagens, CSS e talvez um pouco de JavaScript. Você possivelmente
lançou esses arquivos diretamente do sistema de arquivos sem um servidor web. A vida era

simples.

Dificuldades surgem à medida que seu site se torna maior e mais complexo. Considere

navigation: it may be similar in every le, but adding a new page requires updates
para cada outro. Mesmo referências a CSS e imagens podem se tornar estranhas à medida que

as estruturas de pastas evoluem. Você pode ter considerado opções como lado do servidor
inclui ou PHP, mas uma opção mais fácil pode ser um sistema de gerenciamento de conteúdo

(CMS) …

O que é um Sistema de Gestão de Conteúdo?

Um CMS geralmente fornece painéis de controle administrativos. Estes permitem que os autores

escreva conteúdo que é armazenado em um banco de dados de back-end. Quando um visitante solicita uma URL,

o CMS:

1. determina qual página é necessária

2. solicita conteúdo apropriado do banco de dados
3. carrega um modelo HTML (normalmente do sistema de arquivos)
4. renderiza o conteúdo dentro do template, e
5. retorna uma página HTML formatada para o navegador do visitante.

Isso ocorre quase instantaneamente. O modelo pode incluir código para gerar menus.
de acordo com a hierarquia de navegação. A vida é doce, e mais de quatro em cada dez
as pessoas escolhem o open-source alimentado por PHP/MySQLWordPressCMS para

gerenciar seu site.

Infelizmente, um CMS levanta um conjunto diferente de questões:

Você precisa aderir à forma de trabalho do CMS. Pode ser desconfortável adicionar
texto ou componentes personalizados.

O servidor está realizando mais trabalho, e o desempenho pode ser afetado.

Existem pontos adicionais de falha. Uma atualização de software ou falha no banco de dados

pode derrubar seu site.

O que é um Gerador de Sites Estáticos?

Um SSG é um compromisso entre usar um site estático codificado à mão e um CMS completo.

mantendo os benefícios de ambos. Em essência, você gera uma página HTML estática-
site baseado em conceitos semelhantes a CMS, como modelos. O conteúdo pode ser
extraído de um banco de dados, arquivos Markdown, uma API ou qualquer armazenamento prático

localização.
A geração do site pode ocorrer na sua máquina de desenvolvimento, servidor de staging, ou
usando um serviço para construir quando mudanças são enviadas ao repositório de código. O
Os arquivos HTML resultantes e outros ativos são então implantados em um servidor web ao vivo.

O termo "estático" não significa "imutável". Um SSG constrói uma página uma vez, enquanto um

O CMS o constrói a cada solicitação. O resultado final é idêntico e os usuários nunca

saiba a diferença.

Um conceito relacionado é um CMS "Headless" ou "Desacoplado". Estes usam uma interface

como o WordPress para gerenciar a administração de conteúdo, mas permitir que outros sistemas

acessar os dados via umAPI REST, ou um API GraphQL. Portanto, um SSG como
Eleventy podeconstrua um site estático usando WordPressconteúdo da página extraído de
um servidor interno. Os arquivos HTML resultantes podem ser enviados para um servidor web, mas

a instalação do WordPress nunca precisa ser acessível publicamente de fora

organização.

O termoJamstack(JavaScript, APIs e Marcação) também é utilizado em relação a

sites estáticos. Refere-se ao aumento de frameworks, funções sem servidor, e
ferramentas associadas que geram arquivos estáticos mas permitem interatividade mais complexa

a ser criado.

Os geradores de sites estáticos populares incluemJekyll, Eleventy, Gatsby, Hugo, e

Metalúrgico. SSGs estão disponíveis para a maioria das línguas (vejaStaticGenpara muitos
mais). Estruturas [Link] renderizar páginas estaticamente sempre que possível, mas
também permite que o desenvolvedor execute código do lado do servidor quando necessário.

Let’s examine the bene ts of using an SSG …

1. Flexibilidade

Os CMSs normalmente restringem suas opções, porque estão vinculados a um banco de dados com

campos específicos. Se você quiser adicionar um widget do Twitter a algumas páginas, normalmente
é necessário um plugin, um shortcode ou alguma funcionalidade personalizada.

Em um site estático, o widget pode ser simplesmente inserido em um arquivo diretamente ou usando um

há poucos limites, porque você está livre daquelas

imposto por um CMS.

2. Melhor Desempenho

A maioria das aplicações CMS oferece sistemas de cache integrados ou acionados por plugins para

garanta que as páginas sejam geradas e reutilizadas quando possível. Isso é eficaz, embora

o overhead de gerenciar, validar e regenerar páginas em cache permanece.

Sites estáticos podem criar páginas pré-cacheadas que nunca precisam expirar. Os arquivos também podem

ser minimizado antes da implantação para garantir a menor carga e facilidade

implantado por meio de redes de entrega de conteúdo globais (CDNs). Um site estático sempre
desempenhar melhor do que uma versão impulsionada por CMS usando um template semelhante.

Aprenda PHP de graça!

Dê o salto para a programação do lado do servidor com uma cobertura abrangente
de PHP e MySQL.

Normalmente RRP $39,99 Seu totalmente grátis

Name

Email

Obtenha o livro grátis

3. Menos dependências do lado do servidor

Uma instalação típica do WordPress requer:

um sistema operacional adequado como Ubuntu ou CentOS

um servidor web como Apache ou NGINX
PHP com extensões associadas e configurações de servidor web
MySQL
o aplicativo WordPress
quaisquer plugins necessários

o código do tema/modelo.

Essas dependências devem ser instaladas e gerenciadas. O WordPress requer menos

mais esforço do que algumas outras aplicações, mas ainda é possível para uma única atualização de

causar caos.

Um gerador de site estático pode exigir tantas dependências quanto, mas elas podem ser executadas

em um PC de desenvolvedor e não são implantados em um servidor de produção. Um SSG

gera arquivos HTML do lado do cliente e ativos associados que podem ser hospedados em
qualquer servidor web. Não há nada mais para instalar, gerenciar ou manter.

4. Maior Confiabilidade

Um CMS é complexo, com muitas partes móveis e pontos de falha. Execute um

Um site WordPress por qualquer período de tempo e você quase certamente encontrará o
temida "Falha ao estabelecer uma conexão com o banco de dados" erro. CMS imprevisto
problemas podem surgir de aumentos súbitos no tráfego, que sobrecarregam o servidor, causando falhas

o banco de dados, ou restringir conexões ativas.

Servir um site estático é menos intensivo. Em muitos casos, o servidor apenas precisa retornar
A escalabilidade se torna simples de acordo com a demanda de tráfego. Ainda é possível
para derrubar um servidor web ou sobrecarregar APIs, mas levará consideravelmente mais concorrentes

solicitações.

5. Segurança Superior

Existem várias razões pelas quais alguém pode querer atacar o seu site. Tráfego
sequestro, publicidade clandestina, vinculação, falsificação de autenticidade e hospedagem de malware todos

permitir que um usuário não autorizado faça ganhos monetários e/ou de kudos.

Um CMS abre uma série de vetores de ataque. O mais óbvio é a tela de login:
é tão seguro quanto a senha mais fraca do usuário. Esteja ciente de que qualquer página em execução

o código do lado do servidor também oferece potenciais explorações - como enviar e-mails de spam via

seu formulário de contato. Pode não ser óbvio que alguém obteve acesso;
os piores culpados querem permanecer escondidos.

Um site estático pode exigir pouca ou nenhuma funcionalidade do lado do servidor. Alguns riscos permanecem,

mas raramente são tão problemáticos:

Alguém poderia acessar um servidor via SSH ou FTP e vandalizar páginas ou

Faça upload de arquivos. No entanto, geralmente é simples verificar alterações (talvez

usando git status), limpe todo o site e regenere-o novamente.

APIs chamadas por um site estático estão expostas no navegador e podem ser exploradas
de uma maneira idêntica a qualquer código do lado do servidor — como um enviador de e-mail de formulário. Bom

práticas de segurançaCORS, eCSPajudará.

6. Considerações sobre Controle de Clientes

Você pode passar semanas construindo um tema CMS atraente para o cliente descartar.
site dentro de minutos após a entrega! Usar um CMS não é necessariamente fácil, e ele oferece
poder considerável para editores de conteúdo. Você pode restringir direitos como plugin

a instalação, mas não impedirá alguém de mudar fontes, introduzindo conflito

cores, adicionando fotografias ruins ou corrompendo o layout.

Um site estático pode ser tão limitado ou tão flexível quanto você escolher. Se você estiver usando

Markdown ou similares at les, editores são menos capazes de cometer erros ou causar danos
afetar a estilização da página. Alguns sentirão falta dos painéis de administração de conteúdo do CMS, mas

você pode ou:

1. usar seu CMS existente e limpar os dados antes da geração, ou

2. fornecer fluxos de trabalho mais simples, como editar arquivos baseados em Git emStackEditou

[Link].

7. Controle de Versão e Testes

Os dados do banco de dados são voláteis. Um CMS permite que os usuários adicionem, excluam ou alterem conteúdo.

em um capricho. Apagar todo o site está a poucos cliques de distância. Você pode fazer backup de bancos de dados

mas, mesmo que isso seja feito regularmente, você ainda é provável que perca alguns dados.

Um site estático é geralmente mais seguro. O conteúdo pode ser armazenado em:

at les: eles podem então ser controlados por versão usandoGitou sistemas semelhantes.
O conteúdo antigo é mantido, e as alterações podem ser desfeitas rapidamente.

bancos de dados privados: os dados são necessários apenas quando o site é gerado, então precisam

not be exposed on a public server.

O teste também se torna mais fácil porque o site pode ser gerado e visualizado.
em qualquer lugar — até mesmo no PC de um cliente.

Com um pouco mais de esforço, você pode implementar sistemas de implantação para construir o site.

remotamente e atualizar o servidor ao vivo quando novo conteúdo tiver sido enviado para um

repositório, revisado e aprovado.

Então, tudo está bem no mundo dos sites estáticos. Ou não está? Leia meu post de acompanhamento em 7

Razões para NÃO usar um gerador de site estático.

Para demonstrações práticas de construção de sites com um Gerador de Sites Estáticos, veja:

Como Criar um Site Estático com Metalsmith

Introdução ao Eleventy
Como Usar o WordPress como um CMS Headless para Eleventy

Craig Buckler

Craig é um consultor web freelance do Reino Unido que criou sua primeira página para IE2.0 em 1995. Desde então, ele tem estado
advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise
especificações, sites e aplicativos online para empresas e organizações, incluindo o Reino Unido
Parlamento, o Parlamento Europeu, o Departamento de Energia e Mudança Climática, Microsoft e mais. Ele está
escreveu mais de 1.000 artigos para o SitePoint e você pode encontrá-lo@craigbuckler.

Latest Remote Jobs

Engenheiro Frontend Sênior

SitePoint
reagir javascript

.Net Developer
Tecnologia Global
.net sql

Engenheiro Sênior - Equipe de Dados

IPinfo
bigquery python

Desenvolvedor Full Stack

Sem fundo

DesenvolvedorToArquiteto de OLS e OSS

Bit
javascript

Mais Empregos Remotos

 Como Usar o ngrok para Compartilhar um Local
Site de Desenvolvimento

By Craig Buckler

Web

22 de abril de 2021

Share:

Este tutorial demonstra uma maneira de compartilhar seu servidor de desenvolvimento localhost

com qualquer pessoa, em qualquer lugar, usando ngrok para criar um túnel seguro para o seu local

máquina.

Demonstrando as últimas funcionalidades do seu aplicativo para gerentes de projeto ou clientes

não é fácil, a menos que estejam sentados a poucas mesas de distância. Pode ser possível cometer

as mudanças e implantá-las em um servidor de testes público, mas esse processo pode ser

impraticável se você estiver apenas buscando uma opinião sobre a cor de um widget ou demonstrando

a futilidade da sugestão ridícula deles!

Idealmente, você precisa de alguma forma de compartilhar o acesso a uma aplicação web que está atualmente em execução.

no seu servidor de desenvolvimento localhost. o ngrok fornece essa solução.

O que é ngrok?

Seu computador de desenvolvimento pode estar conectado a uma rede segura atrás de um

Firewall. Para contornar restrições de acesso, o ngrok executa um pequeno processo cliente em

sua máquina que cria um túnel de conexão privada para a nuvem ngrok
serviço. Seu servidor de desenvolvimento localhost está mapeado para um [Link]

subdomínio, que um usuário remoto pode acessar. Não há necessidade de expor

portas, configurar o redirecionamento ou fazer outras alterações de rede.
O software cliente ngrok está disponível para Windows, macOS e Linux.

O ngrok é seguro?

O túnel de conexão estabelecido pelo ngrok é seguro e pode transmitir dados apenas
para a porta localhost que você tem aberta. Seria difícil causar qualquer dano,
mas o ngrok é tão seguro quanto a aplicação que você está testando.

Na maioria dos casos, você usará o ngrok para conceder acesso temporário a alguém emitindo
eles com um URL gerado aleatoriamente. É melhor presumir que qualquer um poderia
acessar seu aplicativo enquanto o túnel estiver aberto. Você pode querer desativar isso "deletar tudo

A opção enquanto o ngrok está ativo!

Quanto custa o ngrok?

O básicoserviço ngroké gratuito e permite até quatro túneis e 40 conexões

por minuto. As opções comerciais começam a partir de $5 por mês, oferecendo mais
conexões e domínios personalizados.

Baixar ngrok

Para começar, [Link] your browser and click Inscreva-separa se registrar. Um Google

ou a conta do GitHub é mais fácil, mas você pode escolher o registro padrão com um
endereço de e-mail e senha. Um link de verificação de e-mail será enviado para você.

Após o login, você será direcionado para ongrok dashboard onde você pode baixar o
cliente para o seu sistema operacional.
Baixe e extraia o arquivo, seguindo quaisquer instruções específicas para o seu sistema operacional. É

Então, é necessário adicionar seu token de autenticação executando o comando mostrado

na seção Conecte sua conta um pouco mais abaixo na página.

./ngrok authtoken<token>

Nota: Usuários do Windows irão digitar ./[Link].

Como usar o ngrok

Inicie sua aplicação web usando seu comando normal de inicialização, em seguida, anote a porta

e se está rodando em http ou https. Para iniciar um novo túnel ngrok, execute:

./ngrok<protocolo> <porta>

Por exemplo, se o seu site for servido em[Link] , insira:

./ngrok http8888

O terminal será limpo e mostrará o status com dois Encaminhando http e

endereços HTTPS, como[Link] Você pode passar
ou URL para outra pessoa para que ela possa acessar seu aplicativo de qualquer lugar.
O terminal mostra um registro de solicitações enquanto o ngrok está ativo.
 Aprenda PHP gratuitamente!

Dê o salto para a programação do lado do servidor com uma cobertura abrangente

de PHP e MySQL.

Normalmente RRP $39,99Seu absolutamente grátis

Name

Email

Baixe o livro grátis

O painel de status do ngrok [Link]/pontos_finais/statustambém

shows a list of currently active URLs and client IP addresses. (You may need to
atualize o navegador para atualizá-lo.)

Assim que você terminar, saia do ngrok pressionandoCtrl| Cmd+ Cno seu terminal.

Mais ajuda e opções estão disponíveis ao digitar:

./ngrokajuda

Alternativas ao ngrok

ngrok é possivelmente o mais fácil e conhecido serviço de tunelamento de localhost

serviço, mas opções alternativas incluem:

 LocalXposeum serviço comercial com opções gratuitas. É necessário se inscrever, mas
Clientes baseados em terminal e interface gráfica do usuário estão disponíveis.

[Link] serviço gratuito que funciona via SSH, portanto, nenhum cliente ou cadastro é necessário
necessário.

túnel localum cliente [Link] de código aberto. Não é necessário se inscrever.

JPRQum cliente Python de código aberto. Não é necessário se inscrever.

shhhum cliente de contêiner baseado em Docker de código aberto. Nenhum cadastro é necessário.

ngrok e serviços de túnel seguro semelhantes podem revolucionar a forma como você demonstra
aplicativos web para outros trabalhadores remotos. Isso ajudará a testar e reduzir a frustração

delays de feedback.

Craig Buckler

Craig é um consultor web freelancer do Reino Unido que criou sua primeira página para IE2.0 em 1995. Desde então, ele tem estado
defendendo padrões, acessibilidade e técnicas de melhor prática HTML5. Ele criou uma empresa
especificações, sites e aplicações online para empresas e organizações, incluindo o Reino Unido
Parlamento, o Parlamento Europeu, o Departamento de Energia e Mudança Climática, a Microsoft, e mais. Ele é
escreveu mais de 1.000 artigos para o SitePoint e você pode encontrá-lo@craigbuckler.

Últimos Empregos Remotos

Engenheiro Frontend Sênior

SitePoint
reagir javascript

.Net Developer
Tecnologia Global
.net sql
 Engenheiro Sênior - Equipe de Dados
IPinfo
bigquery python

Desenvolvedor Full Stack

Sem fundo

DevToArquiteto deOLS e OSS

Bit
javascript

Mais Trabalhos Remotos

Coisas que fazemos Sobre Contato

Premium Nossa história Entre em contato conosco

Boletins Informativos Terms of use Perguntas Frequentes

Fóruns Política de privacidade Publique seu livro conosco

Ofertas Associações corporativas Escreva um artigo para nós

Trabalhos Remotos Anunciar

Conectar

© 2000 – 2021 SitePoint Pty. Ltd.

Este site está protegido pelo reCAPTCHA e pelo GooglePolítica de PrivacidadeeTermos de Serviçoaplicar.