[MÚSICA]
Agora que você tem Node.js no seu computador,
obviamente você está querendo começar a usá-lo imediatamente.
Então, neste exercício, vamos começar a usar Node.
Vamos configurar um arquivo empacotado, ou adjacente, para a
nossa pasta de teste Git que temos trabalhado até agora.
Em seguida, vamos configurar um módulo nó chamado como servidor lite que
servirá o conteúdo da nossa pasta get test.
E então podemos navegar este arquivo index.html e
outros arquivos em um navegador.
E também veremos como o servidor lite nos permitirá
ver automaticamente as atualizações em nossa janela do navegador à medida que fazemos alterações em nosso
arquivo index.html, ou quaisquer outros arquivos em nossa pasta get test.
O servidor lite é algo que vamos usar extensivamente neste e
futuros cursos, 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.json que vamos configurar?
Então aqui, eu tenho algumas informações
do site npmjs.org
que especifica o que exatamente é o papel do arquivo package.json.
Portanto, o arquivo package.json serve como a documentação sobre o que todos os
outros pacotes dos quais seu projeto é dependente.
Assim, por exemplo, quando você configura o servidor lite do seu projeto,
que será gravado no arquivo package.json.
E para que, posteriormente, você também possa fazer uso desse pacote no futuro.
Além disso, ele permite
que você especifique qual versão específica de um pacote do qual seu projeto é dependente.
Portanto, mesmo que o pacote do qual você depende mude no futuro,
você pode insistir que você deseja que o usuário instale apenas uma
versão específica do pacote para uso dentro de seu aplicativo de nó.
E também, torna suas compilações reproduzíveis, o
que significa que quando você compartilha seu código com outros
, eles também podem fazer a instalação de todos os módulos de nó,
como veremos mais adiante neste exercício, em seu próprio computador.
Então, obviamente, sua próxima pergunta será, como criamos esse arquivo.json pacote?
Se você estiver iniciando um novo projeto no qual deseja inicializar o
arquivo package.json, basta digitar npm init no prompt na pasta do projeto.
E, em seguida, 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 de teste Git.
Então aqui estou eu na pasta git-test na minha janela do terminal.
Certifique-se de que também abre uma janela de terminal ou uma janela de comando e
, em seguida, vá para a pasta git-test.
E no prompt, digite npm init.
E depois 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 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 aí.
E, em seguida, o ponto de entrada, eu diria apenas index.html.
Normalmente, se for um pacote de nó, o ponto de entrada será index.js.
Agora, esta pasta que temos configuração é
uma pasta baseada em index.html, então é por isso que eu acabei de digitar index.html.
Comando de teste, nada.
Repositório Git, se já tivéssemos configurado o repositório git no
exercício anterior, ele solicitará automaticamente que para você, caso contrário,
isso estaria vazio e lhe dará uma opção para digitar o URL do repositório git,
caso você esteja 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 a licença.
E então, ele mostrará a configuração do arquivo package.json no formato JSON.
Então, se sua família tem um JSON, parece muito, muito familiar para você.
Então, se isso parece tudo bem, vamos apenas dizer OK e,
em seguida, isso resulta na criação do arquivo package.json.
Então, agora, se você listar o conteúdo da pasta,
você veria o arquivo.json package.json no conteúdo da pasta.
Abra essa pasta de teste do Git em 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 um módulo de nó
usando NPM, o Node Package Manager.
Então, vamos instalar este módulo de nó chamado como servidor de luz.
O light 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 servidor de luz e, em seguida, vamos ver como podemos fazer
uso do servidor de luz 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 onde a versão live do seu projeto de desenvolvimento web.
Para que, à medida que você fizer alterações em seu projeto,
você possa ver as alterações imediatamente refletidas no navegador.
Então este é um pacote de nó muito bom que é muito útil para este propósito.
Então vamos configurar este servidor de luz.
Para fazer isso, adicione o prompt.
Digite a instalação do NPM.
Portanto, observe, se você quiser que o NPM instale um pacote de nó,
é 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 servidor lite.
Então, vamos salvar essas informações no arquivo package.json.
Então, para fazer isso, você vai digitar — salve-dev.
Agora, a opção save-dev especifica que este servidor lite é usado para
dependência de desenvolvimento para o nosso projeto.
Se você estiver instalando um módulo de nó no qual seu projeto é diretamente
dependente, então você iria instalá-lo simplesmente dizendo a opção —save.
Então, vamos em frente e instalá-lo.
E você espera pacientemente que a instalação ocorra.
Levará alguns minutos para concluir a instalação.
Uma vez instalado, então você
notaria imediatamente quando você olhar para o conteúdo da sua pasta,
você notará imediatamente que há uma pasta lá criada chamada node_modules.
Agora, se você entrar no node_module, você verá um monte
de outras subpastas lá, que contêm módulos de nó,
que são necessários para os gostos do nosso módulo de nó e assim por diante.
Então vamos fazer um tour rápido da pasta de módulos do nó para ver
quais são os conteúdos destes.
Indo para a minha pasta git-test, se você estiver indo para a pasta de módulos de nó
, você veria, como eu disse, um monte de subpastas lá.
Normalmente, você não precisa se aventurar na pasta de módulos de nó.
Eles só existem lá porque eles são necessários para o [INAUDÍVEL].
Assim, à medida que você navega, você deve notar uma pasta chamada lite-server aqui.
Quando você entra na pasta lite-server,
observe em particular a presença do arquivo index.js e, em
seguida, seu arquivo package.json e várias outras coisas.
Portanto, este conteúdo da pasta compreende o módulo do nó lite-server.
Mas este módulo de nó lite-server é dependente de outros módulos de nó
para fornecê-lo com alguma funcionalidade adicional.
Então, essa é a razão pela qual quando você instala o módulo de nó de servidor leve, ele irá, por sua vez,
instalar muitos outros módulos de nó, dos quais o próprio servidor de luz é dependente.
Então essa é a razão pela qual você vê essa explosão dessas
pastas dentro dos módulos do nó.
Não se preocupe muito com isso, a soma total de pastas não será
mais do que algumas dezenas de megabytes.
Portanto, ele não vai encher seu diretório com lixo.
Isso é tudo essencial para nó para ser capaz de ajudá-lo.
Caso você esteja curioso sobre o servidor de lite-lite-e como ele funciona e assim por diante,
você sempre pode ir até este site do GitHub onde o servidor de lite-está hospedado.
E, em seguida, procure a documentação para lite-server.
Vou apresentar-lhe tudo o que você precisa saber sobre lite-server enquanto passamos por
este curso e os cursos restantes.
Então você não precisa se preocupar muito com isso, mas apenas no caso de você estar curioso,
você sempre pode ir ao 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.
Depois de ter concluído isso, em seguida, vá para o.
Editor onde você tem a pasta, pasta Git-Test, aberta e,
em seguida, exibir 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.
Então você veria a versão do nome e o autor do repositório e,
em particular, anote essas informações aqui.
Ele diz DevDependencies, então ele especifica o lite-sever,
e também notar que diz hat 2.2.2.
Então, o que significa que este projeto específico
depende de lite-server que é pelo menos uma versão 2.2.2 ou superior.
Então isso é muito útil para nós.
Por que precisamos dessa informação aqui?
Mais tarde, quando você for para os outros exercícios,
você notará que, ao armazenar isso em um repositório online,
você não quer armazenar tudo na pasta de módulos de nó.
Você só estará armazenando informações de todos os arquivos que criamos.
A pasta de módulos de nó sempre pode ser recriada
digitando NPM install em nosso prompt de comando.
E, em seguida, com base nas dependências de desenvolvimento e
dependências listadas no arquivo packager, todos os
módulos de nó dos quais seu projeto depende serão instalados automaticamente.
Veremos isso mais tarde sobre como usar a
instalação do NPM neste curso.
Agora que estamos no arquivo package.json vamos fazer algumas edições para
que possamos 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 o NPM suporta que permite que
você especifique um monte de coisas que serão iniciadas.
Então, mais tarde, veremos como fazemos uso disso.
Então aqui vou eu dizer “npm run lite”.
E depois desse teste, vou adicionar
mais uma entrada chamada “lite”,
que vou configurar como “lite-server”, ok?
Com essas alterações, vamos salvar o arquivo package.json.
E então, agora nosso projeto está configurado, de modo que agora se você iniciar o lite- server,
o conteúdo de sua pasta será agora servido em seu navegador favorito.
Voltando ao nosso prompt de comando, adicione o prompt.
Se eu digitar, npm start, agora você vê por que eu coloquei o
início do cartão de entrada no meu arquivo Package.json.
Se eu disser npm start, seja qual for o início configurado como no arquivo Package.json,
nós especificamos que npm run light, e o lite foi especificado como servidor lite.
Então, essencialmente, estamos dizendo Iniciar o servidor de lite-.
Então, uma vez que eu digite npm start, ele irá iniciar o lite-server, e
ele irá servir o conteúdo desta pasta.
Agora, como você acessa o conteúdo desta pasta?
Se você quiser acessar isso localmente,
você irá acessá-lo especificando o que você é como localhost: 3000.
Estas são as configurações padrão para o lite-server.
Além disso, isso deve abrir automaticamente
a janela do navegador do seu navegador padrão, e
mostrar o conteúdo do índice ou HTML na janela do navegador.
Aqui você pode ver que eu abri meu editor e
minha janela do navegador direcionada ao localhost:3000
simultaneamente lado a lado, para que possamos ver
como a janela do navegador refletirá imediatamente
quaisquer alterações que fizermos em nossa pasta de teste Git.
Então deixe-me ir para index.html.
E então, pelo bem do espaço, eu vou virar isso.
E então, então aqui, você pode ver que este é o conteúdo disso.
E então, agora, deixe-me acrescentar mais um parágrafo.
E salve as alterações e, em seguida, 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, será muito apropriado
para você ser capaz de ver as mudanças imediatamente.
Então, quando você faz uma alteração e, em seguida, salva
o arquivo, o código modificado é imediatamente carregado em seu navegador.
Assim, você pode ver imediatamente a mudança sendo refletida na janela do seu navegador.
Esta é uma ferramenta muito útil enquanto você está fazendo o desenvolvimento de seu projeto.
Essa é a razão pela qual eu apresentei você a esse servidor de lite-, e
configurá-lo para que possamos fazer uso dele, à medida que 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.
Então verificando novamente,
Veremos que já temos três commits em nosso repositório Git.
E este repositório Git já está espelhado para o nosso repositório Git online
que configuramos no exercício anterior, seja no Bitbucket ou no GitHub.
Minha pasta git-test é sincronizada com meu
repositório Bitbucket neste exercício específico.
Então, o que eu vou fazer agora é mostrar a você como você pode excluir algumas
pastas da pasta do seu projeto
e, em seguida, certificar-se de que elas não estão sincronizadas com seu repositório online.
Agora, como eu disse, a pasta node_modules sempre pode ser recriada
digitando npm install no prompt.
Então é por isso que quando você carrega
o conteúdo de sua pasta para um repositório Git on-line,
ou quando você faz um commit da pasta para o seu repositório Git,
você não quer que a pasta node_modules ou todas as subpastas abaixo dela sejam
incluídas no commit.
Então, como excluímos algumas pastas ou
alguns arquivos de nossa pasta de serem registrados 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 git-test,
eu vou criar um novo arquivo e vou chamá-lo de .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 importante que você configure o arquivo com exatamente esse 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 node_modules vai ser
excluída do nosso commit git.
Então, uma vez que eu criar esse arquivo.gitignore e
, em seguida, adicionar node_modules 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 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, em seguida, fazer um git status.
E então você vê que todos esses novos arquivos foram registrados em seu commit.
Vamos fazer um git commit. git commit -m “quarto 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 mestre e esperar
que ele seja empurrado para o nosso servidor.
Agora, se você for para o seu repositório Git on-line,
você verá que o arquivo package.json e
.gitignore teriam sido registrados em seu repositório Git.
Indo para o meu repositório Bitbucket a partir do teste do Git, você verá que
quando eu olhar para a 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,
aprendemos como configurar um arquivo package.json usando npm init.
Aprendemos como instalar um módulo npm.
E nós aprendemos como usar o módulo npm lite-server para servir
o conteúdo de nossa pasta de projeto para que ele possa ser visualizado em um navegador.
Então, esta é uma boa maneira de servir seu conteúdo web,
seu aplicativo web ou seu site,
para que você possa ver mudanças em tempo real sendo refletidas na janela do seu navegador.
E então também vimos como podemos configurar o .gitignore para que algumas
pastas possam ser excluídas do check-in em nosso repositório Git.
Isso completa este exercício.
Então, com isso, eu tenho certeza que você tem uma boa alça sobre
o uso de ambos Git, e, em seguida, também nó e nó módulos.
Não se preocupe, nós estaremos usando nó extensivamente, de várias maneiras,
como você passar pelos cursos desta especialização.
Isto é só um começo.
[ MUSIC]