[MÚSICA]
Agora que você tem Node.js em seu computador,
você obviamente está querendo começar a usá-lo imediatamente.
Então, neste exercício vamos começar a usar Node.
Vamos configurar um arquivo package.json para
nossa pasta git-test com a qual temos trabalhado até agora,
então vamos configurar um módulo Node chamado como lite-server que
irá servir o conteúdo da nossa pasta git-test.
E então podemos navegar neste arquivo index.html e
outros arquivos em um navegador.
E também veremos como o lite-server permitirá que
nos veja automaticamente atualizações na janela
do navegador conforme fazemos alterações em nosso arquivo index.html ou
quaisquer outros arquivos em nossa pasta git-test.
O lite-server é algo que vamos usar extensivamente neste e
cursos futuros para poder ver as mudanças em tempo real em
uma janela do navegador enquanto você edita os arquivos do seu projeto.
Como mencionei, queremos configurar o arquivo package.json.
Então, o que exatamente é esse arquivo package.json que vamos configurar?
Então aqui, eu tenho algumas informações de
o site npmjs.org que especifica o que
exatamente é o papel do arquivo package.json.
Assim, o arquivo package.json serve como a documentação
sobre o que todos os outros pacotes dos quais o seu projeto depende.
Assim, por exemplo, quando você configurar o lite-server para
seu projeto, isso será gravado no arquivo package.json.
Assim, posteriormente, você também pode fazer uso desse pacote no futuro.
Além disso, ele permite que você especifique qual versão específica de um pacote
que seu projeto está dependente.
Portanto, mesmo que o pacote do qual você depende mude no futuro,
você pode insistir que deseja que o usuário instale apenas uma versão
específica do pacote para uso em seu aplicativo Node.
E também torna suas construções reprodutíveis,
o que significa que quando você compartilha seu código com outros,
então eles também podem fazer a instalação de todos os módulos Node,
como veremos mais tarde neste exercício, em seu próprio computador.
Então, obviamente, sua próxima pergunta seria, como criamos esse arquivo package.json?
Se você estiver inicializando um novo projeto, onde deseja inicializar o arquivo package.json
, basta digitar npm init no prompt na pasta do projeto.
E então isso irá levá-lo através de um conjunto de passos
que lhe permitirá configurar o seu arquivo package.json.
Então vamos prosseguir com isso para o nosso projeto git-test.
Então aqui estou eu na pasta git-test na minha janela do terminal.
Certifique-se de que você também abre uma janela de terminal ou
uma janela de comando e, em seguida, vá para a pasta git-test.
No prompt, digite npm init e siga as perguntas que são feitas.
Então, para o nome do projeto, vamos apenas deixá-lo como o padrão, git-test.
Para a versão, vamos apenas deixá-lo como 1.0.0.
Podemos editar isso mais tarde.
Para descrição,
Este é um diretório de teste
para aprender Git e Node.
Não importa, digite alguma descrição lá.
E, em seguida, o ponto de entrada, vou apenas dizer index.html.
Normalmente, se for um pacote Node, o ponto de entrada seria index.js.
Agora, esta pasta que nós configuramos é uma pasta baseada em index.html,
então é por isso que eu apenas digite index.html.Comando de teste
, nada.
repositório Git, Se já tivéssemos configurado o repositório Git no exercício anterior
, ele irá automaticamente solicitar isso para você.
Caso contrário, isso estará vazio e dará a você uma opção de digitar o URL do repositório Git
no caso de você estar usando um repositório Git online.
Algumas palavras-chave para o seu projeto, que vou deixar em branco.
Autor, digite seu nome.
Vamos ser narcisistas.
E licença.
E então ele irá mostrar-lhe a configuração do arquivo package.json no formato JSON.
Então, se você está familiarizado com JSON, isso vai parecer muito, muito familiar para você.
Então, se isso parece tudo bem, vamos apenas dizer ok.
E então isso resulta na criação dos arquivos.json package.json.
Então agora se você listar o conteúdo da pasta,
você veria o arquivo package.json no conteúdo da pasta.
Abra a pasta git-test no seu editor favorito e
, em seguida, dê uma olhada no conteúdo do arquivo package.json em seu editor.
Como o próximo passo, vamos aprender como podemos instalar
a Node módulo usando o NPM, o Node Package Manager.
Então, vamos instalar este módulo de nó chamado como lite-server.
O lite-server servirá o conteúdo desta pasta git-test em
um servidor que ele inicia, para que você possa visualizar o conteúdo em um navegador.
Dado que temos um arquivo index.html, se servirmos esta pasta
então será um site e você pode visualizar o index.html em um navegador.
Então vamos configurar o lite-server e então vamos ver como podemos fazer
uso do lite-server para servir o conteúdo desta pasta.
Isso é muito, muito útil porque se você está trabalhando em um projeto de desenvolvimento web,
você quer ver a versão ao vivo do seu projeto de desenvolvimento web para
que, à medida que você faz alterações em seu projeto,
você pode ver as mudanças imediatamente refletidas no navegador.
Então este é um pacote Node muito bom que é muito útil para este propósito.
Então vamos configurar o servidor lite-.
Para fazer isso no prompt, digite npm install.
Então note, se você quiser que o npm instale um pacote Node,
é assim que você vai chamá-lo.
E então você diria lite-server.
E então também queremos salvar o fato de que nosso projeto está usando o lite-server.
Então, vamos salvar essas informações no arquivo package.json.
Então, para fazer isso, vamos digitar —save-dev.
Agora, a opção save-dev especifica que este lite-server é usado para
dependência de desenvolvimento para o nosso projeto.
Se você estiver instalando um módulo Node no qual seu projeto é diretamente dependente
em, então você iria instalá-lo simplesmente dizendo opção —save.
Então vamos em frente e instalá-lo.
E você espera pacientemente que a instalação ocorra.
Levará alguns minutos para que isso conclua sua instalação.
Uma vez que está instalado, então você iria imediatamente
notar quando você olhar para o conteúdo da sua pasta,
você vai notar imediatamente que há uma pasta lá criado nome_node_modules.
Agora, se você entrar no node_modules você verá um monte inteiro
de outras subpastas lá que contêm módulos de nó que
são necessários para o módulo de nó lite-sever e assim por diante.
Então, vamos fazer um tour rápido da pasta node_modules para ver
quais são os conteúdos destes.
Indo para a minha pasta git-test, se você estiver indo para a pasta node_modules,
você veria como eu disse, um monte de subpastas lá.
Normalmente você não precisa ser renderizado na pasta node_modules,
eles só existem lá porque eles são necessários para o lite-server.
Então, como você navega através de você, deve uma pasta de aviso chamado lite-server aqui.
Quando você entra na pasta lite-server, observe em particular a presença de
o arquivo index.js e, em seguida, um arquivo package.json e várias outras coisas.
Portanto, este conteúdo da pasta compreende o módulo de nó lite-server.
Mas este módulo de nó lite-server depende de outros módulos de nó
para fornecer-lhe algumas funcionalidades adicionais.
Então essa é a razão, quando você instala o módulo de nó lite-server, ele vai, por sua vez,
instalar muitos outros módulos de nó nos quais o próprio lite-server é dependente.
Então essa é a razão pela qual você vê essa explosão de
essas pastas dentro da pasta node_modules.
Não se preocupe muito com isso, a soma total de tudo isso não será mais do que
algumas dezenas de megabytes.
Então, ele não vai encher seu diretório com esse lixo.
Isso tudo é essencial para que o nó seja capaz de ajudá-lo.
Caso você esteja curioso sobre o servidor lite-e como ele funciona e assim por diante.
Você pode sempre ir até este site do GitHub onde o lite-server é postado e
então procurar a documentação para lite-server.
Vou apresentá-lo a tudo o que você precisa saber sobre lite-server como passamos por
este curso e os cursos restantes.
Então você não precisa se preocupar muito com isso.
Mas no caso de você estar curioso,
você sempre pode ir a este site para descobrir mais detalhes sobre lite-server.
O link é fornecido em suas instruções de exercício e
recursos adicionais fazem parte desta lição.
Uma vez que você tenha concluído isso, então vá para o editor,
onde você tem a pasta, pasta git-test, abra e
em seguida, visualize o conteúdo do arquivo package.json.
Assim, você veria que o arquivo package.json contém exatamente as informações que
você configurou com seu npm nele.
Assim, você veria o nome, versão e autor do repositório,
e, em particular, observe que esta informação aqui diz DevDependencies.
E, em seguida, especifica lite-server, e também notar que diz, ^2.2.2.
Então, o que significa que este projeto em particular depende de
lite-server que é uma versão pelo menos 2.2.2.
Todos de alto nível.
Então isso é muito útil para nós.
Agora, por que precisamos dessa informação aqui, mais tarde quando você for para os outros exercícios
, você notará que quando você armazenar isso em um repositório online.
Você não quer armazenar tudo em sua pasta node_modules.
Estaremos apenas armazenando informações de todos os arquivos que criamos.
A pasta node_modules sempre pode ser recriada por
digitando nmp install em nosso prompt de comando.
E, em seguida, com base nas dependências DevDependencies e
que estão listadas no arquivo package.json.
Todos os módulos de nó dos quais seu projeto depende serão automaticamente
instalados.
Veremos isso mais tarde,
sobre como usar o npm install neste curso.
Agora, agora que estamos no arquivo package.json, vamos fazer algumas edições para
que poderemos fazer uso do lite-server para servir esse conteúdo.
Então, aqui nesta opção chamada scripts,
vamos adicionar mais um aqui.
Então vamos dizer, começar.
Então start é um comando que npm suporta
que permite especificar um monte de coisas que serão iniciadas.
Então, mais tarde, vamos ver como vamos fazer uso disso.
Então aqui, eu vou dizer, npm executar lite.
E depois do teste, eu vou
para adicionar em mais uma entrada chamada,
lite que eu vou configurar como lite-server.
Ok, com essas mudanças, vamos salvar o arquivo package.json e
então agora, nosso projeto está configurado.
Para que agora, se você iniciar o lite-server,
o conteúdo da sua pasta será agora servido em seu navegador favorito.
Voltando para o nosso prompt de comando e o prompt.
Se eu digitar npm start, agora você vê por que
eu coloquei essa entrada chamada start no meu arquivo package.json.
Então, se eu disser npm start, seja qual for o início configurado como,
no arquivo package.json.
Nós especificamos que, como npm executar lite, e, em seguida, lite foi especificado como lite-server.
Então, essencialmente, estamos dizendo iniciar o lite-server.
Assim, uma vez que eu digitar, npm start, ele vai iniciar o lite-server e
ele vai servir até o conteúdo desta pasta.
Agora, como você acessar o conteúdo desta pasta?
Se você quiser acessá-lo localmente, você acessará por
especificando o URL como localhost:3000.
Esta é a configuração padrão para o lite-server.
Além disso, isso deve abrir automaticamente
a janela do navegador do seu navegador padrão e
então mostrar o conteúdo de index.html nessa janela do navegador.
Aqui, você pode ver que eu abri meu editor e
minha janela do navegador direcionada para localhost:3000
simultaneamente lado a lado.
Para que possamos ver como a janela do navegador imediatamente
refletirá quaisquer alterações que fizermos em nossos arquivos na pasta git-test.
Então deixe-me ir para index.html.
E então, pelo bem do espaço, eu vou virar isso.
E então aqui você pode ver que este é o conteúdo disso.
E então agora deixe-me adicionar em
mais um parágrafo,
E salvar as mudanças.
E então você notará imediatamente que a alteração que
fiz no meu arquivo index.html é refletida no meu navegador.
Isso fornece uma maneira muito agradável de ser capaz de observar, em tempo real,
as alterações que você faz em seu código sendo refletidas em seu navegador.
Então, quando você está trabalhando em um projeto, seria muito apropriado para
você ser capaz de ver as mudanças imediatamente.
Então, quando você faz uma alteração e salva o arquivo,
o código modificado é imediatamente carregado em seu navegador para
você pode ver imediatamente a alteração sendo refletida na janela do navegador.
Esta é uma ferramenta muito útil enquanto você está fazendo o desenvolvimento do seu projeto.
Essa é a razão pela qual eu apresentei você ao servidor lite e
configurá-lo para que possamos fazer uso dele enquanto desenvolvemos o site neste curso.
Se você se lembra, nós já tínhamos configurado nossa pasta git-test para ser um repositório git,
para que verificando novamente, nós
veremos que já temos três commits em nosso repositório git.
E este repositório git já está no nosso repositório git online,
que configuramos no exercício anterior, seja no bitbucket ou no GitHub.
Minha pasta git-test está sincronizada com meu repositório bitbucket
neste exercício específico.
Então o que eu vou fazer agora é mostrar como você pode excluir algumas pastas
da pasta do seu projeto e
então certifique-se de que elas não estão sincronizadas com o seu repositório online.
Agora, como eu disse, a pasta de módulos de nó sempre pode ser recriada
digitando npminstall no prompt.
Então é por isso que, quando você carrega o conteúdo de
sua pasta para um repositório git online ou
quando você faz um commit da pasta para o seu repositório git,
você não quer que a pasta de módulos de notas ou todas as subpastas
sob ele sejam incluídas no, Commit.
Então, como excluímos algumas pastas ou
alguns arquivos de nossa pasta de serem verificados em nosso repositório git.
Então, para fazer isso, vamos configurar um arquivo chamado .gitignore.
Então esse é o nome do arquivo, .gitignore.
Então, para criar este arquivo.gitignore, vamos para o nosso editor.
Então, no editor na pasta de teste do git, eu vou criar um novo arquivo.
E eu vou nomeá-lo .gitignore.
Note que o nome começa com um ponto e
, em seguida, o resto do nome é G-I-T-I-G-N-O-R-E.
Então isso é muito,
muito importante que você configure o arquivo com exatamente o nome, .gitignore.
Então vamos criar este arquivo chamado, .gitignore, e
a primeira linha desse arquivo, vamos digitar como node_modules.
Então o que isso significa é que,
a pasta do módulo de nó será excluída do nosso commit git.
Então, uma vez que eu criar esse arquivo.gitignore e
, em seguida, adicionar módulos de nó no arquivo.gitignore, vamos salvar as alterações.
E então vamos agora fazer um commit do estado atual do nosso projeto
em nosso repositório git.
Espero que você se lembre de seus comandos git.
Vamos fazer um status git e, em seguida, quando você fizer isso,
você notará imediatamente que você tem o arquivo index.html
marcado como modificado e, em seguida, os dois novos arquivos, .gitignore e package.json.
Então fazemos um git add., e depois fazemos um status git.
E então você vê que todos esses novos arquivos foram verificados em seu commit.
Vamos fazer um commit git, git commit -m “fourth
commit”. E os arquivos estão comprometidos.
Vamos enviar o novo commit para o nosso repositório online.
Então, para fazer isso, git push
-u origem master.
E espere que ele seja enviado para o nosso servidor.
Agora, se você for para o seu repositório git online,
você verá que o arquivo package.json e
.gitignore teriam sido verificados no seu repositório git.
Indo para meu repositório bitbucket para o git-test.
Você verá que quando eu olhar para o código-fonte,
você verá que o arquivo package.json foi adicionado,
o .gitignore foi adicionado e o novo arquivo index.html foi verificado.
Então, isso completa este exercício.
Então, neste exercício,
nós aprendemos como configurar um arquivo package.json usando o minuto npm.
Aprendemos a instalar um módulo npm.
E nós aprendemos como usar o módulo npm do servidor lite para servir até
o conteúdo da nossa pasta de projeto para que ele possa ser visualizado em um navegador.
Então esta é uma boa maneira de servir o seu conteúdo,
seu aplicativo web ou seu site para
que você pode ver mudanças em tempo real sendo refletido na janela do seu navegador.
E então, também vimos como eles podem configurar o .gitignore para que algumas pastas
possam ser excluídas do check-in no nosso repositório git.
Isso conclui este exercício.
Então, com isso, eu tenho certeza que você teria conseguido um bom controle em
o uso de ambos os módulos git e, em seguida, também nó e nó.
Não se preocupe.
Estaremos usando o nó extensivamente de várias maneiras
como você passar pelos cursos desta especialização.
Isto é apenas um começo.
[MÚSICA]