Criando sua primeira aplicação Web com Node.js e Express.js

Pré-requisitos:

1. Node.js
2. Express.js

PARTE 01 - Criando um novo Projeto

Para criar um novo os passos são bastantes simples.

Primeiro execute o comando abaixo e onde está escrito site troque pelo nome que deseja dar a seu projeto:
$ express site --ejs

Alguns arquivos irão ser criados, como mostra na imagem abaixo.

Agora entre no repositório e instale as dependências do projeto com o comando abaixo:
$ cd site && npm install

A pasta onde seu projeto está localizado vai/ficar ser similar a imagem abaixo:

PARTE 02 - Entendendo a Estrutura Básica do Express

app.js

Neste arquivo é configurado, praticamente, todos os recursos necessários para o projeto, sendo este simples ou não. Algumas destas configurações são rotas, favicon do website, sessão, dentre outras coisas.

package.json

Todas as dependências necessárias que surgirem durante o desenvolvimento do seu projeto você pode instalar por este arquivo executando o comando npm install. Por exemplo, suponha que você vá trabalhar com MySQL, então você vem até este arquivo e em “dependencies” adiciona "mysql": "*", com isto a última versão do MySQL é adicionado na sua pasta node_modules e fica disponível para ser usado por você no projeto usando o comando require(“mysql”);.

index.ejs

Este arquivo é a página inicial do website, mas você pode adicionar uma outra em teu local alterando o valor de response ou res no index.js, mas geralmente é o mesmo não é alterado.

index.js

Este arquivo é onde você faz o controle de suas páginas. Por exemplo, quando abrimos a primeira página do website, que é geralmente tratado como sendo somente uma barra /, o local que vai olhar qual arquivo .ejs deve tratar essa requisição é alguma função que está em index.js.

style.css

É o arquivo CSS que já vem como padrão quando criamos o projeto, mas assim como o index.ejs o mesmo pode ser alterado e, inclusive, ser adicionado vários outros.

PARTE 03 - Fazendo o Upload de uma Imagem

Agora chegou o momento de brincar um pouco com Express. Neste tutorial vou dar um exemplo de uso de Express não tão comum (digamos assim). Vou mostrar a vocês como fazer o upload de imagens e espero que consigam entender um pouco do funcionamento do Express com este processo simples.

Vamos criar um arquivo chamado saveImage.js dentro da pasta javascripts.

E adicionar o seguinte código dentro do arquivo saveImage.js.

Agora em index.ejs adicione o seguinte código.

Para que possamos utilizar o formidable precisamos instalar o mesmo em nossa pasta node_modules, e para fazer isto vamos usar o package.json.

Adicionando o seguinte trecho:
$ "formidable": "*"

E com isso temos a última versão disponível para ser utilizada.

Por último vamos configurar o arquivo index.js para que quando for requisitado que uma imagem seja salva atravez da URL /upload o mesmo chame a função necessária para que a ação seja possível.

No arquivo vai ser adicionado duas linhas de código, as mesmas são:

PARTE 04 - Reinstalando as dependências e Rodando a Aplicação

Vamos rodar novamente o comando npm install para que o formidable possa enfim ser adicionado e posteriormente vamos dar um npm start para que a aplicação execute.

No navegador vamos digitar localhost:3000 e a seguinte página irá ser aberta.

Escolha uma imagem e clique em Upload Image para que ela seja salva.

O retorno da ação anterior é uma mensagem na tela mostrando o local que a imagem foi salva.

Em saveImage.js você pode mudar o local de upload de imagens.

Entrando na pasta uploads agora encontro a imagem salva.

FIM!

Bom, espero que esse tutorial ajude á você a iniciar com seus primeiros projetos com Express e respectivamente Node.js. Quaisquer dúvidas pode entrar em contato comigo pelo meu email que está na página inicial do meu GitHub. Obrigado e até mais!