node.ucp

Node.ucp

Este é um painel de controle JavaScript isomórfico completo, escrito sobre o NodeJS e o React. O objetivo deste painel de controle é servir como exemplo ou código de caldeira para outros, pois é totalmente de pleno direito e muito flexível. Escrevi o código para ser facilmente adaptável para diferentes casos de uso e tipos de banco de dados e estruturas.

Você pode encontrar soluções escritas por mim para muitos problemas relacionados à renderização do servidor, reagir, manusear o busto de cache de recursos voláteis em trabalhadores de serviços e lidar com sessões manualmente no código -fonte deste aplicativo.

O código usa as funções de seta do ES6 e prometa muito, então familiarize -se com esses conceitos, se você ainda não estiver!

Tentei comentar o máximo possível para explicar o funcionamento do aplicativo no código -fonte, no entanto, se as coisas não estiverem claras, sinta -se à vontade para perguntar.

Demonstração

Informações de login:

Nome de usuário: Jonas

Senha: teste

Clique aqui para a demonstração.

Clique aqui para as imagens no caso que a demonstração não está funcionando.

Pré -requisitos

• Nodejs v6.11.3 ou mais tarde
• MySQL versão 5.6.5 ou posterior, se você deseja usar o banco de dados de amostra.
• Se você estiver usando o Linux, precisará instalar o Node-GYP. Instale -o usando o seguinte comando:

sudo npm install -g node-gyp

• Se você estiver usando o Windows, também precisará instalar ferramentas de construção do Windows para compilar e criar algumas das dependências. Instale -o usando o seguinte comando:

npm install --global --production windows-build-tools

Instalação

1. Navegue para uma pasta vazia onde deseja que o código -fonte seja colocado.
2. Clone o repositório usando o seguinte comando:

git clone https://github.com/zeus2198/node.ucp 

OU

Faça o download do repositório manualmente do botão Green Clone or Download localizado na parte superior direita do repositório e extraia o conteúdo em uma pasta vazia. 3. Verifique se você está na raiz do projeto e digite o seguinte comando para instalar os pacotes necessários para o aplicativo:

npm install

A instalação dos pacotes pode levar algum tempo. 5. Importe o banco de dados de amostra ( ./sample-database.sql ) para o seu servidor MySQL. 4. Open ./config/config.json e edite o arquivo de configuração conforme as configurações do seu sistema.

Iniciando o aplicativo

Modo de desenvolvedor:

Para iniciar o aplicativo no modo desenvolvedor, use o seguinte comando:

npm run start-dev

No modo de desenvolvedor, as seguintes coisas acontecem:

• O aplicativo reinicia automaticamente sempre que houver uma alteração no arquivo qualquer arquivo dentro da pasta ./src .
• O cliente-servidor compartilhou parte do aplicativo é automaticamente agrupado no início do aplicativo.
• O aplicativo usa global.css em vez de global.min.css , que não é armazenado em cache por padrão. Observe que, se você decidir usar nginx para servir o arquivo estático (como descrito posteriormente), poderá cache os arquivos .css, dependendo da configuração do NGINX.
• O busto de cache automático para o arquivo de pacote ocorre no reinício do aplicativo. Esse rebentamento de cache é detectado pelo serviço de serviço ( ./public/js/sw.js ) e o arquivo de pacote é substituído em nosso cache!

Modo de produção:

Antes de iniciar o aplicativo no modo de produção, você precisa agrupar o cliente compartilhado parte do aplicativo em um arquivo para que ele possa ser servido ao cliente, para fazer isso, use o seguinte comando:

npm run make

Observe que o comando acima também minimizará o conteúdo do ./public/css/global.css e armazená -lo como ./public/css/global.min.css .

Depois que o pacote é feito, use o seguinte comando para iniciar o aplicativo:

npm start

No modo de produção, as seguintes coisas acontecem:

• O aplicativo usa global.min.css e não global.css , que é um recurso em cache.
• O busto de cache para o arquivo de pacote ainda ocorrerá, mas apenas para o arquivo de pacote criado usando o comando npm run make .
• O modo de produção do Express (nossa API do servidor da Web usada no aplicativo) está ativado.

Obra de arte

Você pode encontrar os arquivos do Photoshop da obra de arte usada neste projeto daqui

Notas

• O diretório ./src/shared/ contém o código comum na parte do cliente e do servidor. Certifique -se de não expor nenhuma informação confidencial nesta seção.
• O aplicativo usa trabalhadores de serviço que funcionam apenas em domínios habilitados para localhost e https, portanto, verifique se você está usando o protocolo HTTPS com seu domínio.
• As rotas protegidas não são renderizadas no lado do servidor.
• Para limpar o cache , aberto ./public/js/sw.js e edite a string de versão. Em seguida, feche toda a guia Aplicativo aberta no navegador e abra o aplicativo novamente. Use isso para limpar global.min.css para fora do cache ao editar o arquivo global.css .
• Obtendo certificado SSL gratuito e usando o nginx para reverter o proxy um domínio para o seu aplicativo.

Usando bancos de dados diferentes

O arquivo ./src/db/db.api.abstract.js contém uma classe abstrata para nossa API de banco de dados, leia os comentários para especificações do método. Em seguida, exija esse arquivo em sua camada de API de banco de dados personalizada e substitua os métodos abstratos. Consulte ./src/db/mysql.api.js arquivo de implementação. Observe que cada método deve retornar uma promessa.

Depois de terminar a API de gravação para o seu banco de dados, acesse ./config/config.json e edite a opção databaseAPI para corresponder ao nome do arquivo que contém sua camada de API do banco de dados. O arquivo deve ser colocado no diretório ./src/db/ .

Servindo arquivos estáticos usando nginx

Eu recomendo o uso do NGINX para servir arquivos estáticos em vez de nodejs. Para fazer isso, você pode adicionar o seguinte bloco de localização à sua configuração de bloco severado:

 location /public {
	alias  /path/to/your/app/public;
}

Se você decidir ir com o NGINX para servir arquivos estáticos, também poderá mudar a compactação GZIP para o seu aplicativo para o NGINX. Se você fizer isso, o que você deve, desative a compactação no lado do aplicativo, comentando as duas linhas a seguir do arquivo ./node.ucp.js :

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

Usando o gerenciador de processos para garantir que o aplicativo seja para sempre no modo de produção

No modo de produção, você pode querer ter um gerenciador de processos que possa reiniciar o aplicativo, se ele travar, recomendo usar o PM2 para esse fim. Instale o PM2 usando o seguinte comando:

npm install pm2 -g

Agora, antes de usar o PM2 para iniciar seu aplicativo no modo de produção, verifique se o aplicativo é realmente iniciado e executa, caso contrário, seu aplicativo ficará preso no loop de início e reinicialização.

Eu já criei um arquivo de configuração para PM2 para iniciar o aplicativo, para iniciar o aplicativo no modo de produção com o tipo PM2:

pm2 start node.ucp.pm2.json