Frameworks JS na Umbler
Publicar uma aplicação em Node na Umbler é muito fácil! Vamos lhe mostrar aqui alguns dos frameworks mais comuns, e a partir desses você terá a base necessária para todos os outros. :)
Requisitos: Node.js, npm e um terminal.
Cuidados:
Note que algumas frameworks precisam de interação com o usuário na hora de instalar. Notavelmente, o Angular pergunta se ele pode coletar dados anônimos. Isso ocasionará problemas caso a instalação for feita via deploy automático. Pois não haverá ninguém para responder as perguntas e continuar a instalação.
É necessário que essas perguntas não apareçam. E para cada situação pode haver uma maneira diferente para impedir.
Com o Angular, por exemplo, resolveria adicionando a seguinte variável de ambiente:
NG_CLI_ANALYTICS=ci
Passo 1
O primeiro passo é criar um app React em seu computador, para isso vamos usar o create-react-app.
No seu terminal, execute os seguintes comandos:
npm install -g create-react-app
npx create-react-app my-app
cd my-app
Dessa forma você já deve conseguir rodar um npm start e uma aplicação default React vai rodar em seu computador! :)
Passo 2
O próximo passo é criar rotas no backend que atendam requisições ao app. Para isso vamos criar um arquivo server.js, com o seguinte conteúdo:
const express = require("express");
const path = require("path");
const app = express();
const configs = {
caminho: "build", //Aqui será definido a pasta de saída onde contém o index.html e os outros arquivos.
forcarHTTPS: false, //Defina para true se desejar que o redirecionamento para HTTPS seja forçado (é necessário certificado SSL ativo)
port: process.env.PORT || 3000
}
if (configs.forcarHTTPS) //Se o redirecionamento HTTP estiver habilitado, registra o middleware abaixo
app.use((req, res, next) => { //Cria um middleware onde todas as requests passam por ele
if (req.headers["x-forwarded-proto"] == "http") //Checa se o protocolo informado nos headers é HTTP
res.redirect(`https://${req.headers.host}${req.url}`); //Redireciona pra HTTPS
else //Se a requisição já é HTTPS
next(); //Não precisa redirecionar, passa para os próximos middlewares que servirão com o conteúdo desejado
});
app.use(express.static(configs.caminho)); //Serve os outros arquivos, como CSSs, Javascripts, Imagens etc.
app.get("*", (req, res) => {// O wildcard '*' serve para servir o mesmo index.html independente do caminho especificado pelo navegador.
res.sendFile(path.join(__dirname, configs.caminho, "index.html"));
});
app.listen(configs.port, () => {
console.log(`Escutando na ${configs.port}!`);
});
Esse é um código adaptado deste tutorial do React. Foi adicionado a feature de redirecionamento para HTTPS seguindo esse nosso outro tutorial sobre o assunto.
Após criar o arquivo, vamos instalar em nosso projeto as dependências que ele usa.
npm install express path
Passo 3
Para que o build de produção seja criado ao fazer o deploy para a Umbler, você precisa ajustar o seu package.json.
Mude o conteúdo do start script para:
"start": "node server",
Adicione um script de postinstall com o seguinte comando:
"postinstall": "npm run build",
O postinstall é executado após a execução do npm install, criando o build de produção da sua aplicação dentro da pasta build. Já o start executa o arquivo server.js, que inicia o Express na porta 3000.
Passo 4
Finalmente, para fazer o deploy na Umbler, esse tutorial poderá ajudar: https://help.umbler.com/hc/pt-br/articles/115001793863-Node-JS-na-Umbler#deployNode
Passo 1
O primeiro passo é criar um app Angular em seu computador, e para isso vamos usar o Angular CLI.
No seu terminal, execute os seguintes comandos:
npm install -g @angular/cli
ng new my-app
cd my-app
Dessa forma você já deve conseguir rodar um ng serve e uma aplicação default Angular vai rodar em seu computador! :)
Passo 2
O próximo passo é criar rotas no backend que atendam requisições ao App. Para isso vamos criar um arquivo server.js, com o seguinte conteúdo:
const express = require("express");
const path = require("path");
const app = express();
const configs = {
caminho: "dist/myapp", //Aqui será definido a pasta de saída onde contém o index.html e os outros arquivos. Troque "myapp" pelo nome da sua aplicação
forcarHTTPS: false, //Defina para true se desejar que o redirecionamento para HTTPS seja forçado (é necessário certificado SSL ativo)
port: process.env.PORT || 3000
}
if (configs.forcarHTTPS) //Se o redirecionamento HTTP estiver habilitado, registra o middleware abaixo
app.use((req, res, next) => { //Cria um middleware onde todas as requests passam por ele
if (req.headers["x-forwarded-proto"] == "http") //Checa se o protocolo informado nos headers é HTTP
res.redirect(`https://${req.headers.host}${req.url}`); //Redireciona pra HTTPS
else //Se a requisição já é HTTPS
next(); //Não precisa redirecionar, passa para os próximos middlewares que servirão com o conteúdo desejado
});
app.use(express.static(configs.caminho)); //Serve os outros arquivos, como CSSs, Javascripts, Imagens etc.
app.get("*", (req, res) => {// O wildcard '*' serve para servir o mesmo index.html independente do caminho especificado pelo navegador.
res.sendFile(path.join(__dirname, configs.caminho, "index.html"));
});
app.listen(configs.port, () => {
console.log(`Escutando na ${configs.port}!`);
});
Não esqueça de trocar a propriedade caminho dentro do objeto configs para o caminho da pasta onde encontra-se a saída do seu projeto.
Após criar o arquivo, vamos instalar em nosso projeto as dependências que ele usa.
npm install express path
Passo 3
Para que o build de produção seja criado ao fazer o deploy para a Umbler, você precisa ajustar o seu package.json.
Mude o conteúdo do start script para:
"start": "node server",
Adicione um script de postinstall, com o seguinte comando:
"postinstall": "npm run build",
E ajuste o comando de build para:
"build": "ng build --prod",
O postinstall é executado após a execução do npm install, criando o build de prod da sua aplicação dentro da pasta build. Já o start executa o arquivo server.js, que inicia o Express na porta 3000.
Passo 4
Finalmente, para fazer o deploy na Umbler, esse tutorial poderá ajudar: https://help.umbler.com/hc/pt-br/articles/115001793863-Node-JS-na-Umbler#deployNode
Passo 1
O primeiro passo é criar um app Vue em seu computador, para isso vamos usar o Vue CLI.
No seu terminal, execute os seguintes comandos:
npm install -g @vue/cli
vue create my-app
cd my-app
Dessa forma você já deve conseguir rodar um npm run serve e uma aplicação default Vue vai rodar em seu computador! :)
Passo 2
O próximo passo é criar rotas no backend que atendam requisições ao App. Para isso vamos criar um arquivo server.js, com o seguinte conteúdo:
const express = require("express");
const path = require("path");
const app = express();
const configs = {
caminho: "dist", //Aqui será definido a pasta de saída onde contém o index.html e os outros arquivos.
forcarHTTPS: false, //Defina para true se desejar que o redirecionamento para HTTPS seja forçado (é necessário certificado SSL ativo)
port: process.env.PORT || 3000
}
if (configs.forcarHTTPS) //Se o redirecionamento HTTP estiver habilitado, registra o middleware abaixo
app.use((req, res, next) => { //Cria um middleware onde todas as requests passam por ele
if (req.headers["x-forwarded-proto"] == "http") //Checa se o protocolo informado nos headers é HTTP
res.redirect(`https://${req.headers.host}${req.url}`); //Redireciona pra HTTPS
else //Se a requisição já é HTTPS
next(); //Não precisa redirecionar, passa para os próximos middlewares que servirão com o conteúdo desejado
});
app.use(express.static(configs.caminho)); //Serve os outros arquivos, como CSSs, Javascripts, Imagens etc.
app.get("*", (req, res) => {// O wildcard '*' serve para servir o mesmo index.html independente do caminho especificado pelo navegador.
res.sendFile(path.join(__dirname, configs.caminho, "index.html"));
});
app.listen(configs.port, () => {
console.log(`Escutando na ${configs.port}!`);
});
Após criar o arquivo, vamos instalar em nosso projeto as dependências que ele usa.
npm install express path
Passo 3
Para que o build de produção seja criado ao fazer o deploy para a Umbler, você precisa ajustar o seu package.json.
Mude o conteúdo do start script para:
"start": "node server",
Adicione um script de postinstall, com o seguinte comando:
"postinstall": "npm run build",
O postinstall é executado após a execução do npm install, criando o build de prod da sua aplicação dentro da pasta build. Já o start executa o arquivo server.js, que inicia o Express na porta 3000.
Passo 4
Finalmente, para fazer o deploy na Umbler, esse tutorial poderá ajudar: https://help.umbler.com/hc/pt-br/articles/115001793863-Node-JS-na-Umbler#deployNode