Crie seu primeiro projeto Astro

Get ready to…

Executar o assistente de instalação create astro para criar um novo projeto
Iniciar o servidor do Astro em modo de desenvolvimento (dev)
Ver uma pré-visualização ao vivo do seu website no seu navegador

Inicie o assistente de instalação do Astro

A forma recomendada de criar um novo site Astro é através do nosso assistente de instalação create astro.

Na linha de comando do seu terminal, execute o seguinte comando utilizando seu gerenciador de pacotes preferido:
- npm
- pnpm
- Yarn
Janela do terminal
# crie um novo projeto com npm npm create astro@latest
Janela do terminal
# crie um novo projeto com pnpm pnpm create astro@latest
Janela do terminal
# crie um novo projeto com yarn yarn create astro
Confirme y para instalar create-astro
Quando o prompt perguntar “Where would you like to create your new project?”, digite o nome de uma pasta para criar um novo diretório para seu projeto, e.x. ./tutorial

Um novo projeto Astro só pode ser criado em uma pasta completamente vazia, então escolha um nome para a sua pasta que já não exista!
Você verá uma pequena lista de templates iniciais para escolher. Utilize as setas (cima e baixo) para navegador até o template “Empty”, e então pressione return (enter) para enviar sua escolha.
Quando o prompt perguntar se você planejar escrever TypeScript, digite n.
Quando o prompt perguntar “Would you like to install dependencies?”, digite y.
Quando o prompt perguntar “Would you like to initialize a new git repository?”, digite y.

Quando o assistente de instalação completar, você não precisa mais desse terminal. Você agora pode abrir o VS Code para continuar.

Abra seu projeto no VS Code

Abra o VS Code. Você será solicitado a abrir uma pasta. Escolha a pasta que você criou durante o assistente de instalação.
Se essa é sua primeira vez abrindo um projeto Astro, você deve ver uma notificação perguntando se você gostaria de instalar as extensões recomendadas. Clique para ver as extensões recomendadas e escolha a extensão de suporte a linguagem do Astro. Ela irá fornecer highlighting e preenchimento automático para o seu código Astro.
Certifique-se de que o terminal está visível e que você pode ver o prompt de comando, como:
Janela do terminal
```
user@machine:~/tutorial$
```
Para alternar a visibilidade do terminal, utilize Ctrl + J (macOS: Cmd ⌘ + J).

Agora você pode utilizar o terminal direto dessa janela, ao invés do aplicativo Terminal do seu computador pelo resto deste tutorial.

Execute Astro no modo de desenvolvimento

Para que se pré-visualize os arquivos do seu projeto como um website enquanto você trabalha, você irá precisar que o Astro esteja sendo executado no modo de desenvolvimento (dev).

Inicie o servidor de desenvolvimento

Execute o comando para começar o servidor de desenvolvimento do Astro digitando no terminal do VS Code:
- npm
- pnpm
- Yarn
Janela do terminal
npm run dev
Janela do terminal
pnpm run dev
Janela do terminal
yarn run dev
Agora você deve ver uma confirmação no seu terminal de que o Astro está sendo executado no modo de desenvolvimento. 🚀

Veja uma pré-visualização do seu website

Seus arquivos do projeto contém todo o código necessário para mostrar um website Astro, mas o navegador é o responsável por mostrar o seu código como páginas web.

Clique no link localhost em sua janela do terminal para ver uma pré-visualização ao vivo do seu novo website Astro!

(Astro utiliza http://localhost:4321 por padrão se a porta 4321 estiver disponível.)

É assim que o template inicial “Empty Project” do Astro deve se parecer no seu navegador: