Desenvolvimento e build

Com o seu projeto pronto, agora você já pode começar a construir com o Astro! 🚀

Edite seu projeto

Para fazer mudanças, primeiro abra o seu projeto num editor de código. Rodando o seu projeto no modo de desenvolvimento, te permite ter atualizações em tempo real, assim que você edita o seu código.

Você pode customizar alguns aspectos no seu ambiente de desenvolvimento como TypeScript ou instalando a extensão oficial do Astro para o seu editor.

Iniciando o servidor de desenvolvimento do Astro

O Astro já vem com um ambiente de desenvolvimento, que é tudo que você precisa para construir o seu projeto. O comando astro dev que existe na CLI do Astro, inicia esse ambiente, que é onde você pode visualizar o seu site em ação pela primeira vez.

Todo template inicial já possui a pré-configuração do comando astro dev pra você. Depois de explorar os arquivos do seu projeto, use o seu gerenciador de pacotes favorito para rodar esse comando e iniciar o ambiente de desenvolvimento do Astro.

npm run dev

pnpm run dev

yarn run dev

Se tudo der certo, O Astro vai disponibilizar o seu projeto em http://localhost:4321/. Abra esse link no seu navegador e veja o seu novo site!

Trabalhando no modo de desenvolvimento

O Astro irá observer as mudanças que houveram nos seus arquivos dentro da pasta src/ e vai atualizar a página a medida que você desenvolve, então não será necessário reiniciar o servidor quando você fizer alguma alteração durante o desenvolvimento. Você sempre será capaz de ver a versão mais atualizada do seu site no seu navegador em quanto o ambiente estiver rodando.

Visualizando o seu site no navegador, você terá acesso a barra de ferramentas de desenvolvimento do Astro. Durante o desenvolvimento ela ajudará você a inspecionar as ilhas, mostrando problemas de acessibilidade, e mais.

Caso não consiga visualizar o projeto no navegador após iniciar o ambiente de dev, volte ao terminal onde rodou o comando dev e verifique a mensagem que é exibida. Ela dirá se ocorreu algum erro, ou se o seu projeto está disponível numa URL diferente de http://localhost:4321/.

Build e pré-visualização

Para saber como será a versão do seu site durante o tempo de build, saia do ambiente de dev (Ctrl + C) e rode o comando de build apropriado ao seu gerenciador de pacotes no seu terminal:

npm run build

pnpm build

yarn run build

O Astro irá gerar a versão do seu site pronta pra deploy numa pasta separada (dist/ por padrão) e você pode acompanhar o progresso no seu terminal. Você será avisado de qualquer erro no seu projeto durante o processo antes de fazer deploy. Se o TypeScript estiver configurado como strict ou strictest, o comando build verificará a existência de erros no seu projeto.

Assim que a build tiver sido finalizada, rode o comando apropridado preview (por ex. npm run preview) no seu terminal e você conseguirá ver a versão da build do seu site na mesma janela de pré-visualização.

Note que essa pré-visualização do seu código é resultado da última execução do comando de build. Isso significa que você terá uma pré-visualização de como o seu site será após fazer deploy. Qualquer mudança feita no seu código após o comando de build, não será refletida em quanto você estiver pré-visualizando o seu site até que você rode o comando de build novamente.

Use (Ctrl + C) para sair do modo de pré-visualização, assim que reiniciar o ambiente de dev, você estará trabalhando no modo de desenvolvimento que atualizará a pré-visualização a medida que você edita o seu código.

Leia mais sobre a CLI do Astro e os comandos disponíveis em quanto desenvolve com o Astro.

Próximos Passos

Parabéns! Agora você está pronto para começar a construir com o Astro! 🥳

Aqui vai algumas pequenas recomendações do que você pode explorar em seguida. Você pode ler em qualquer ordem. Você até pode deixar um pouco a nossa documentação, e voltar quando tiver algum problema ou dúvida.

Configure o seu ambiente de desenvolvimento

Explore os guias abaixo para customizar a sua experiência de desenvolvimento.

Configuração do editor Personalize seu editor de código para melhorar a experiência de desenvolvedor Astro e destravar novas funcionalidades.

Barra de Ferramentas de Desenvolvimento Explore as mais úteis funcionalidades da barra de ferramentas de desenvolvimento.

Configurando TypeScript Configure opções de tipagem, IntelliSense, e mais.

Explore as Funcionalidades do Astro

Estrutura de Projetos Aprenda mais sobre a estrutura de arquivos do Astro no nosso guia de estrutura de projeto.

Crie coleções de conteúdo Adicione conteúdos ao seu site com frontmatter, validação e tipagem segura.

Adicione transicão entre visualizações Crie páginas com transições e animações suaves.

Aprenda mais sobre ilhas Leia sobre a arquitetura de islands do Astro.

Faça o tutorial introdutório

Construa um blog totalmente funcional a partir de uma página em branco no nosso tutorial introdutório.

Este é um bom caminho para saber como o Astro funciona e te mostra o básico sobre as páginas, layouts, componentes, rotas, ilhas, e mais. Incluindo também uma unidade opcional e totalmente amigável para aqueles que estão iniciando nos conceitos de desenvolvimento web de modo geral, que vai te guiar na instalação das ferramentas necessárias no seu computador, criando uma conta no Github, e fazendo deploy do seu site.

Contribua Comunidade Sponsor