static website
1.0.0
Bem-vindo ao repositório CDNJS/Static-Website, a casa do novo site CDNJS construído com a Vue & Nuxt, seguindo a nova proposta de marca CDNJS da CDNJS/Brand.
Este site se baseia completamente na API do CDNJS para operar, resultando em uso de recursos muito baixo para servir o site e a lógica limitada do aplicativo para atualizar os dados que estão sendo usados (apenas os sitemaps precisam ser atualizados, tudo o mais usa chamadas de API quando uma página é carregada).
Este projeto é executado no Node.js. Certifique -se de ter uma versão instalada que corresponda ao nosso requisito definido no arquivo .nvmrc para este projeto.
Incluído neste projeto está um arquivo de bloqueio de dependência. Isso é usado para garantir que todas as instalações do projeto estejam usando a mesma versão das dependências para consistência.
Você pode instalar as dependências do nó após este arquivo de bloqueio executando:
npm ciDepois que as dependências são instaladas, o site está pronto para ser executado no modo de desenvolvimento. Para iniciar o NUXT no modo de desenvolvimento (sem um servidor personalizado), execute:
npm run dev Antes de executar npm run dev , adicione um pacote NPM global para resolver o 'NODE_ENV' is not recognized as an internal or external command :
npm install -g win-node-envO site é construído usando o Nuxt e depende do Webpack para gerar o pacote do lado do cliente usado para renderizar o site e fornecer interatividade. Devido a isso, podemos usar o analisador do Webpack para entender melhor o que está contribuindo para o tamanho do pacote final.
Para executar o analisador, use o seguinte script de pacote:
npm run dev:analyze Ao trabalhar com o site em desenvolvimento, usando npm run dev ou npm run dev:analyze , a variável de ambiente SITE_HOST será automaticamente definida como http://localhost:3000/ , como é onde o site é acessado pelo script dev.
Ao implantar este site na produção usando o npm run build e npm run start Scripts, a variável de ambiente SITE_HOST deve ser definida e deve ser a base canônica para onde o site será hospedado. Na produção para nós, isso está definido como https://cdnjs.com/ .
Para ativar o Google Analytics para uma implantação do site, você deve definir a variável de ambiente GA_ID . Isso deve ser definido como o ID exclusivo do Google Analytics para sua propriedade, no formulário UA-xxxxxxxxx-x .
O Google Analytics é agrupado com o site usando o módulo @nuxtjs/google-analytics . Se a variável de ambiente não for especificada, o Google Analytics não será incluído com a implantação.
Para ativar o log de erros básicos de sentinela, a variável de ambiente SENTRY_DSN deve ser definida com um URL DSN válido da Sentry.
Para ativar os mapas de origem e o rastreamento de liberação para relatórios de erro na produção, as variáveis de ambiente SENTRY_ORG e SENTRY_PROJECT devem ser definidas com as informações corretas do projeto Sentry, bem como SENTRY_AUTH_TOKEN sendo definido como um token de autenticação válido a partir de sentinela. Os mapas de origem são usados como na produção que usamos JavaScript Minified, para que os Sentry dos Minificados permitam que um erro se originou no código -fonte.
Por padrão, durante o processo de compilação, um arquivo robots.txt será gerado para o site que possui User-agent: * e Allow: * . Se você deseja ter uma instância mais privada do site ou desejar impedir a contaminação potencial de SEO, pode definir o ROBOTS_DISALLOW Env var como 1 . Isso alterará a regra Allow: * para Disallow: / .
Para ativar a geração de sitemap para o site, NODE_ENV deve ser definido como production . Isso permitirá a geração inicial do sitemap durante a construção, bem como a tarefa de segundo plano para regenerar o sitemap durante npm run start , a cada 30 minutos.
Além disso, por ter NODE_ENV=production , isso também informará ao script de geração robots.txt , referenciado acima, para incluir uma regra apontando para o arquivo de índice do Sitemap, com base no SITE_HOST fornecido Env var.
(Observe que, para npm run dev:analyze , npm run build & npm run start , NODE_ENV será automaticamente definido como production ).
Para implantar este site na produção, as seguintes etapas devem ser tomadas:
npm cinpm run buildnpm run start Para implantações em alguns hosts do PAAS, a instalação de dependências e a criação do aplicativo serão realizadas automaticamente, com npm run start sendo definido no Procfile .
Para alterar a porta à qual o aplicativo se liga, defina o ambiente PORT var ao executar o script.
O servidor expresso personalizado é usado para lidar com nossos sitemaps, pois temos muitas rotas para a oferta do Sitemap da Nuxt para lidar com confiabilidade. Durante a etapa de compilação ( npm run build ), os mapas iniciais serão gerados. O servidor Express regenerará esses 30 minutos usando a API CDNJS. Um registro que contém o resultado da última geração no Express está disponível em /sitemap-log.txt no site.
Nosso conjunto completo de testes para linha pode ser executado a qualquer momento com:
npm testIncluídos neste repositório estão um arquivo de configuração ESLINT, bem como um arquivo de configuração Sass-Lint para ajudar a garantir um estilo consistente na base de código para o JS/VUE e o SCSS usados no aplicativo.
Para ajudar a aplicar isso, usamos Eslint e Sass-Lint em nossos testes. Para executar Eslint a qualquer momento, que verifica o estilo de código de qualquer arquivo JavaScript e Vue, você pode usar:
npm run test:eslintEslint também fornece recursos de fixação automática, eles podem ser executados contra a base de código com:
npm run test:eslint:fixDa mesma forma, o Sass-Lint pode ser executado a qualquer momento para verificar a qualidade de todos os arquivos SCSS usados no aplicativo, executando:
npm run test:scssUm pacote secundário, Sass-Lint-Auto-Fix, está disponível para ajudar a corrigir automaticamente alguns dos erros levantados pelo Sass-Lint, que podem ser executados com:
npm run test:scss:fix Como no npm test , que executa Eslint e Sass-Lint, um script de pacote mais curto está disponível para tentar corrigir automaticamente os problemas de ambos os pacotes de linha, que podem ser usados em execução:
npm run test:fix
