npm

Npm é um gerenciador de pacotes para JavaScript. Com ele você consegue encontrar, compartilhar e reutilizar pacotes de código de milhares de desenvolvedores, bem como monta-los de forma poderosa. Para mais informações, selecione aqui.

Você não precisará instalá-lo agora, pois quando instalar o Node.js, ele instalará o npm.

Node.js

Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Node.js usa um modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos. Para mais informações, selecione aqui.

Configuração de servidor com Node.js

Faça o download do Node.js selecionando aqui. A versão que escolhemos, foi a 5.9.1 (estável).

Instale o mesmo no seu servidor Web.

Entre na janela de comandos do Windows e verifique se a mesma está instalada com o comando.

node --version

Inicie a janela de comandos do Windows e entre com o seguinte comando para a instalação:

npm install http-server -g

Crie um diretório o qual será o servidor das páginas com Bootstrap.

md c:\GeoSanWeb

No prompt de comandos do Windows mude para o diretório que contem as páginas do GeoSanWeb:

cd c:\GeoSanWeb

No mesmo prompt de comandos inicie o servidor de páginas do GeoSanWeb com o comando:

http-server . -a 127.0.0.1 -p 8080

Pode acontecer de por você estar utilizando o GeoServer na porta 8080, que ocorra um erro ao rodar este comando, pois existirá um conflito de portas. Para configurar uma porta no NodeJs não existe um arquivo de configuração, basta você inicializar o servidor http na porta desejada. Desta forma, no caso de conflito de portas, você digitaria:

http-server . -a 127.0.0.1 -p 8081

Aparecerá a seguinte resposta indicando que o servidor está no ar:

Agora abra o seu navegador e vá para a página

http://127.0.0.1:8080/

Veja que na janela de comandos do Windows aparecerão os acessos a página Web.

A página inicial do GeoSanWeb irá aparecer.

Para que você possa acessar as páginas de uma outra estação cliente, inicie o NodeJs com para ouvir qualquer porta e não o computador local somente, para isso:

http-server . -a 0.0.0.0 -p 8081

Para mais informações sobre a instalação do Node.js, selecione aqui

Git

Instale o Git-scm, selecionando aqui e realizando o download e instalação do mesmo.

Na instalação selecione a opção Use Git from Windows Command Prompt.

Gulp

Desenvolvedores web front-end possuem todo um fluxo de trabalho para seus projetos, que envolvem tarefas como compilar CSS de pré-processadores, verificar erros de JavaScript, combinar e minificar assets, otimizar imagens, enfim, tarefas necessárias que fazem parte de qualquer workflow minimamente profissional.

Como citado, geralmente este tipo de ferramenta é conhecida como “automatizador de tarefas”, “executador de tarefas”, dentre outros termos do gênero; o Gulp, que também é desta mesma “linha”, se autointitula um build system, algo como um “sistema de construção” ou “sistema de compilação”.

Mais informações/referência, selecione aqui.

Para instalar o Gulp, rode o seguinte comando no browser do Windows:

npm install -g gulp bower

Os seguintes arquivos são necessários para compilar com o Gulp:

gulpfile.js - Este arquivo fica na raiz, é nele que constam os scripts das tarefas de instalação. Neste arquivo estão os comandos, que são passados para o Gulp, sobre o que fazer e como fazer.

package.json -

Bower

Bower é um gerenciador de pacotes, criado pelo pessoal do Twitter, que serve principalmente para pacotes front-end. Um gerenciador de pacotes, é basicamente um arquivo (no caso do Bower, bower.json) em que você lista as dependências do seu projeto e os mantém atualizado com a fonte.

bower.json - lista das depenências do projeto

Para consultar a versão instalada do Bower, na janela de comandos do Windows rode:

bower -v

Mais informações/referência, selecione aqui.

Compilação do GeoSanWeb

Para que você possa instalar todas as dependências e disponibilizar o compilador Gulp ativo para que sempre quando alguma alteração for realizada no código fonte das aplicações siga o seguinte procedimento:

Vá pela janela de comandos do Windows, para o diretório master da aplicação.

cd \Desenv\...\master

Instale as dependências do Node

npm install

Instale as dependências do GeoSanWeb

bower install

Para terminar, rode o Gulp

gulp

Pronto agora ele está ouvindo a sua aplicação e sempre que alguma alteração no código fonte da mesma ocorrer ele irá compilar automaticamente.

Gulp

Para modificar as configurações utilizadas pelo Gulp e seus caminhos principais, altere o arquivo gulp.config.js. Neste arquivo é possível modificar as opções de plug-in.

Principais tarefas do Gulp

Para rodar o Gulp

gulp

Desabilitar cache

Quando você estiver alterando as páginas web nos arquivos .jade ou .html pode acontecer que apesar do Gulp gerar as páginas html atualizadas, no browser elas não atualizarem. Para isso, no Chrome, sobre a página que estiver visualizando selecione com o botão direito do mouse Inspect Element, selecione Network e em seguida selecione Disable cache.

Inicialização automática do NodeJS

Para que sempre que o computador ligar, seja inicializado o NodeJS, crie os seguintes arquivos:

Arquivo para inicializar o NodeJS

Nome do arquivo: nodejs.bat Diretório para colocá-lo: C:\Users\Administrador ou o nome do seu usuário do servidor

echo on
cd C:\Desenv\geosanweb
http-server . -a 127.0.0.1 -p 8081

Atente para o número da sua porta que utilizará.

Arquivo para chamar a inicialização do NodeJS

Nome do arquivo: IniciaNodeJS.bat Diretório para colocá-lo: C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp ou o nome do diretório de inicialização de programas quando o servidor liga ou reinicia

echo on
start cmd.exe /k C:\Users\Administrador\NodeJs.bat

Inicialização automática do Gulp

Para que sempre que o computador ligar, seja inicializado o compilador Gulp, crie os seguintes arquivos:

Arquivo para inicializar o Gulp

Nome do arquivo: gulp.bat Diretório para colocá-lo: C:\Users\Administrador ou o nome do seu usuário do servidor

echo on
cd C:\Desenv\geosanweb\master
gulp

Atente para o número da sua porta que utilizará.

Arquivo para chamar a inicialização do Gulp

Nome do arquivo: IniciaGulp.bat Diretório para colocá-lo: C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp ou o nome do diretório de inicialização de programas quando o servidor liga ou reinicia

echo on
start cmd.exe /k C:\Users\Administrador\gulp.bat

Referências

Para vídeos sobre o conceito básico de html, selecione aqui

Para vídeo sobre conceitos básicos de Bootstrap, selecione aqui

Para uma relação de ícones para mapeamento, selecione aqui

Para acessar a documentação do Angular, selecione aqui