Como configurar um ambiente de desenvolvimento local

Jan 22, 2026
Como
Set up a local development environment
(Crédito da imagem: futuro)

Um ambiente de desenvolvimento local permite que você use sua própria máquina para executar seu site, em vez de usar um fornecido por um hospedagem na web. companhia. Você pode personalizar a configuração sem se preocupar que isso afetará seu site ao vivo, bem como fazer e testar o desenvolvimento do site antes de fazer o upload do seu site. Tirar risco ao construir algo torna o processo de desenvolvimento muito menos estressante.

Outro benefício de trabalhar localmente é que você não precisa ser conectado à Internet. Se você tem Wi-Fi lento, gostaria de trabalhar no jardim ou estiver viajando, não há necessidade de procurar um sinal de WiFi o tempo todo.

O tempo gasto ftping para um site de estadiamento e esperar que seu site atualize realmente adiciona mais de um dia de desenvolvimento. Um ambiente local permitirá que você se concentre no código e nos divertidos bits de sites de construção.

Este tutorial assume que você está em um Mac, e o tutorial para começar com o Valet se concentra nisso. Para uma alternativa de PC, tente Herdade .

Um conhecimento básico do terminal é bom, embora você possa ser capaz de acompanhar, pois os comandos são bastante simples. Eles são principalmente para obter os componentes pré-requisitos instalados e em execução.

Depois de completar este tutorial, você terá configurado PHP, Homebrew e Compositor em sua máquina, instalado com manobrista e aprendeu a configurar sites locais.

Baixe os arquivos para este tutorial.

  • 5 maneiras de acelerar seus sites e aplicativos

01. Instale o homebrew.

Set up a local development environment: Install Homebrew

Comece a instalar o Homebrew do terminal (Crédito da imagem: Sush Kelly)

Primeiro passo aqui é instalar o Homebrew. Digite o seguinte comando no seu terminal. 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

02. Instale o PHP.

Set up a local development environment: Install PHP

Certifique-se de que seu PHP é a versão 7 (Crédito da imagem: Sush Kelly)

Em seguida, precisamos instalar / atualizar para o PHP7, então verifique usando php -v. Se você precisar instalar você pode digitar: 

brew install homebrew/php/php70

Se você reiniciar sua janela do terminal agora e digitar PHP -v. Mais uma vez, deve mostrar o V7 instalado.

03. Instale o compositor.

Você precisará baixar compositor e, em seguida, colocá-lo em um diretório que faz parte do seu caminho. 

 php -r "copy ('https:/getcompositor.org/installer', 'compositor-setup.php');
php -r "se (hash_file ( 'SHA384', 'compositor-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') {echo 'Installer verificado';} else {echo 'Installer corrupto'; unlink (" compositor-setup. php ');} echo php_eol; "
php compositor-setup.php
php -r "revela ('compositor-setup.php');"

04. Mova-se para o seu caminho

Set up a local development environment: Move to your PATH

Coloque compositor em seu caminho (Crédito da imagem: Sush Kelly)

Agora mova o compositor para um diretório dentro do seu caminho. Uma vez feito, você pode verificar seu acesso a ele digitando compositor-v. . 

 MV Composer.Phar / usr / local / bin / compositor

05. Verifique seu caminho

Se você digitar Echo $ Path , você verá o que contém. Se isso não acontecer, digite o seguinte para adicioná-lo. 

 Exportação Path = $ Caminho: ~ / .compositor / fornecedor / bin

06. Exigir valet globalmente

Agora temos as peças instaladas, podemos continuar a instalar o manobrista. Primeiro. Vamos verificar nada é usar a porta 80. Digite o seguinte e, se não retornar, somos bons para ir. 

 netstat -an | grep "\ .80" | grep ouve

07. Instale o manobrista.

Usamos o compositor para instalar o pacote de manobrista para nós e, em seguida, podemos Instala de manobrista . 

 Composerglobal requer lares / manobrista
Instala de manobrista

08. Parque / diretórios sem parar

Crie um diretório para seus sites de desenvolvimento e diga aos valet para atendê-los. Observe que as pastas dentro disso podem ser acessadas como sub domínios. 

 # Mova para o diretório do seu projeto
CD ~ / Projetos / Valet /
Valet Park

09. Esqueça diretórios

De maneira semelhante a estacionar, se você não quer mais uma pasta para servir através do manual, basta usar o comando esquecer de dentro do diretório. 

 com espaços //
Valet esquecer

10. LINK / LINKING Diretórios

Você também pode ligar para diretórios. Isso permite que você escolha o nome que você usa. 

 CD ~ / Projetos / Valet / Subproject /
# link o diretório subprojeto para torná-lo acessível no hiperlink "http://subproject.dev" \ hhttp: //subproject.dev
Subproject do link de manobrista

11. Compartilhe seu site com o mundo

Você pode compartilhar seu URL local para o mundo exterior. No diretório do seu projeto, digite Compartilhar com manobrista e criará um URL que você possa usar.

12. Usando um banco de dados

Você precisará instalar seu banco de dados de escolha - para o WordPress, podemos ir em frente e instalar o MySQL. 

 BREW INSTALAR MYSQL

13. Escolha uma ferramenta de banco de dados

Com uma configuração de banco de dados, uma ferramenta para importar e exportar dados é útil, já que não temos phpmyadmin ou similar com o manobrista como é tão leve.

14. Download sequel pro

Set up a local development environment: Download Sequel Pro

Sequel Pro é uma ferramenta de banco de dados simples (Crédito da imagem: sequela pro)

Estamos usando a Sequel Pro, como oferece uma interface simples. Você pode Baixe aqui .

15. Conecte o banco de dados

Usando as configurações padrão do MySQL, adicione os seguintes detalhes e teste sua conexão. 

 Host: 127.0.0.1
Nome de usuário: raiz
Senha: (deixe em branco)

16. Configure um site do WordPress

Set up a local development environment: Set up a WordPress site

Instale o núcleo do WordPress no seu diretório de manobrista (Crédito da imagem: Sush Kelly)

Com tudo agora no lugar, configure um site do WordPress. Crie uma nova pasta dentro do seu diretório de manobrista e instale o núcleo do WordPress.

17. Adicione um banco de dados

Set up a local development environment: Add a database

Crie um banco de dados na Sequel Pro (Crédito da imagem: Sush Kelly)

Na Sequel Pro, crie um novo banco de dados com o mesmo nome que a pasta criada. Atualizar o. WP-config. arquivo para se adequar.

18. Teste é tudo funcionando

Set up a local development environment: Test it's all working

Cabeça para o navegador e verifique se está funcionando (Crédito da imagem: Sush Kelly)

Agora, se você abrir seu navegador e navegar para (sua pasta) .test Você deve ver a tela de instalação do WordPress. Siga isso como normal.

19. Levando ainda mais

O manobrista não é apenas para a execução do WordPress instala, foi realmente criado originalmente para o desenvolvimento do Laravel. Se você está construindo algo sob medida no PHP ou usando uma estrutura, você pode criar facilmente um novo site criando um novo diretório para ele em sua pasta raiz.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Crédito da imagem: futuro)

Junte-se a nós em 26 de setembro para Gerar css. , uma conferência sob medida para web designers trazida a você pelo criativo Bloq, net e web designer. Economize £ 50 com um bilhete de madrugada quando você reservar antes de 15 de agosto de 2019.

Este artigo foi originalmente publicado em emissão 287 da revista Creative Web Design Web designer . Comprar edição 287 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

  • 40 tutoriais brilhantes do WordPress
  • Os melhores serviços de hospedagem WordPress em 2019
  • 4 maneiras diferentes de criar um maquete de site

Como - Artigos mais populares

O Guia Essencial para Foreshortening na arte

Como Jan 22, 2026

(Crédito da imagem: Rob Lunn) Se você está se perguntando o que o escorço na arte é, temos certeza de que você ..

Como criar um aplicativo com vue.js

Como Jan 22, 2026

O Ecossistema JavaScript tem mudado por mais de uma década, significando que os desenvolvedores frontign tiveram que rastrear no..

Como implementar modos leves ou escuros no CSS

Como Jan 22, 2026

A especificação CSS é sempre evoluindo. O processo de implementação de novos recursos no CSS é complicado, mas a versão si..

Use a bolsa de ferramentas do marmoset para apresentar modelos em VR

Como Jan 22, 2026

Mamoset Toolbag não é de forma alguma nova para o Arte 3D. indústria. Tem sido fora há anos, e é conhecido po..

Como criar um aplicativo de painel com reagir

Como Jan 22, 2026

Pagina 1 de 2: Faça um aplicativo de painel em reagir - passos 1-10 Faç..

Construa seu próprio jogo de física webgl

Como Jan 22, 2026

Este projeto será dividido em diferentes partes. Vamos dar uma breve introdução a Heroku, mostrar como usar fisijs com três.j..

Crie um auto-retrato com apenas 4 cores

Como Jan 22, 2026

O autorretralhador é um dos desafios mais recompensadores que um artista pode tentar. Porque conhecemos as paisagens de nossos p..

Como adicionar dados aos seus desenhos de esboço

Como Jan 22, 2026

O design da tela percorreu um longo caminho nos últimos anos. Heck, nós nem estávamos dizendo 'design de tela' há alguns anos..

Categorias