{"id":26398465,"url":"https://github.com/claudimf/alura_performance_web","last_synced_at":"2026-04-08T16:03:05.724Z","repository":{"id":86373917,"uuid":"342378229","full_name":"claudimf/alura_performance_web","owner":"claudimf","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-26T23:02:51.000Z","size":957,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T05:02:04.678Z","etag":null,"topics":["alura","alura-cursos-online","css","docker","docker-compose","gulpjs","html-css","html-css-javascript","html5","node","node-js","nodejs","npm","performance-web"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/claudimf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-25T21:02:31.000Z","updated_at":"2021-02-26T23:02:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"3790a89c-6536-4b39-883d-24e8c9f0d6e8","html_url":"https://github.com/claudimf/alura_performance_web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/claudimf/alura_performance_web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudimf%2Falura_performance_web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudimf%2Falura_performance_web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudimf%2Falura_performance_web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudimf%2Falura_performance_web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/claudimf","download_url":"https://codeload.github.com/claudimf/alura_performance_web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claudimf%2Falura_performance_web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alura","alura-cursos-online","css","docker","docker-compose","gulpjs","html-css","html-css-javascript","html5","node","node-js","nodejs","npm","performance-web"],"created_at":"2025-03-17T12:30:43.850Z","updated_at":"2026-04-08T16:03:05.719Z","avatar_url":"https://github.com/claudimf.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projeto do [Curso de Otimização de Performance Web do Alura](https://cursos.alura.com.br/course/otimizacao-performance-web)\n\n## Sobre o projeto:\n\nClone o [projeto](https://github.com/alura-cursos/performance-web) para depois configurarmos o docker.\n\n### Configurar a aplicação no Docker:\n\n1. Cria o arquivo [server.js](https://github.com/claudimf/alura_performance_web/blob/main/docker-compose.yml) para subir o servidor:\n    ```sh\n    var express = require(\"express\");\n    var app = express();\n    var router = express.Router();\n\n    var path = __dirname + '/site/';\n    const PORT = 8080;\n    const HOST = '0.0.0.0';\n\n    router.use(function (req,res,next) {\n    console.log(\"/\" + req.method);\n    next();\n    });\n\n    router.get(\"/\",function(req,res){\n    res.sendFile(path + \"index.html\");\n    });\n\n    app.use(express.static(path));\n    app.use(\"/\", router);\n\n    app.listen(PORT, HOST);\n    console.log(`Running on http://${HOST}:${PORT}`);\n    ```\n\n2. Cria o arquivo [Dockerfile](https://github.com/claudimf/alura_performance_web/blob/main/Dockerfile)\n\n3. Cria o arquivo [docker-compose.yml](https://github.com/claudimf/alura_performance_web/blob/main/docker-compose.yml)\n\n4. Adaptar o arquivo [package.json](https://github.com/claudimf/alura_performance_web/blob/main/package.json) adicionando as dependências:\n    ```sh\n    {\n        \"devDependencies\": {\n            \"nodemon\": \"^1.18.10\"\n        },\n        \"dependencies\": {\n            \"ejs\": \"^2.6.1\",\n            \"express\": \"^4.16.4\",\n            \"mongoose\": \"^5.4.10\"\n        }\n    }\n    ```\n\n5. Adaptar o arquivo [.dockerignore](https://github.com/claudimf/alura_performance_web/blob/main/.dockerignore) para ignorar os arquivos abaixo:\n    ```sh\n    node_modules\n    npm-debug.log\n    ```\n\n6. Criar o arquivo [npm-shrinkwrap.json](https://github.com/claudimf/alura_performance_web/blob/main/npm-shrinkwrap.json) com o seguinte conteúdo:\n    ```sh\n    {\n        \"dependencies\": {\n            \"graceful-fs\": {\n                \"version\": \"4.2.4\"\n            }\n        }\n    }\n    ```\n7. Faça o build da sua aplicação para poder seguir com as aulas:\n    ```sh\n    docker-compose build\n    ```\n\n# Aulas\n\n\u003cdetails\u003e\n    \u003csummary\u003eEconomizando bytes\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003ePorque otimizar o front-end?\u003c/li\u003e\n        \u003cli\u003eMotivos pra otimização\u003c/li\u003e\n        \u003cli\u003eMinificação\u003c/li\u003e\n        \u003cli\u003eAutomação com Gulp\u003c/li\u003e\n        \u003cli\u003eProjeto \u0026 Ambiente\u003c/li\u003e\n        \u003cli\u003eProjeto: Minificação\u003c/li\u003e\n        \u003cli\u003eProjeto: gulp copy\u003c/li\u003e\n        \u003cli\u003eServidor \u0026 GZIP\u003c/li\u003e\n        \u003cli\u003eTamanho do download\u003c/li\u003e\n        \u003cli\u003eServidor HTTP local\u003c/li\u003e\n        \u003cli\u003eAnálise com DevTools\u003c/li\u003e\n        \u003cli\u003eProjeto: habilitar GZIP\u003c/li\u003e\n        \u003cli\u003eRevisão do conteúdo\u003c/li\u003e\n        \u003cli\u003ePara saber mais: Brotli\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eOtimizações de Imagens\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eO peso das imagens\u003c/li\u003e\n        \u003cli\u003eOtimizações lossless\u003c/li\u003e\n        \u003cli\u003eImagens grandes\u003c/li\u003e\n        \u003cli\u003eO melhor formato\u003c/li\u003e\n        \u003cli\u003eO melhor formato 2\u003c/li\u003e\n        \u003cli\u003eOtimizações lossy\u003c/li\u003e\n        \u003cli\u003eSVGs otimizados\u003c/li\u003e\n        \u003cli\u003eOtimização lossless\u003c/li\u003e\n        \u003cli\u003eOtimização lossy\u003c/li\u003e\n        \u003cli\u003eAutomação das otimizações\u003c/li\u003e\n        \u003cli\u003eProjeto: redimensionar imagens\u003c/li\u003e\n        \u003cli\u003eProjeto: otimizar imagens\u003c/li\u003e\n        \u003cli\u003eHarmonia na equipe\u003c/li\u003e\n        \u003cli\u003ePara saber mais: ferramentas de otimização de imagens\u003c/li\u003e\n        \u003cli\u003ePara saber mais: por trás dos formatos de imagens\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eO custo dos requests\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eCusto dos requests\u003c/li\u003e\n        \u003cli\u003eConexões simultâneas\u003c/li\u003e\n        \u003cli\u003eAnálise dos requests no DevTools\u003c/li\u003e\n        \u003cli\u003eProjeto: diminuindo dependências\u003c/li\u003e\n        \u003cli\u003eDeploy no Google App Engine\u003c/li\u003e\n        \u003cli\u003eMão na massa: deploy no App Engine\u003c/li\u003e\n        \u003cli\u003eAnálise de performance\u003c/li\u003e\n        \u003cli\u003eWebPageTest\u003c/li\u003e\n        \u003cli\u003ePageSpeed Insights\u003c/li\u003e\n        \u003cli\u003e(opcional) Analise outro site\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eConcatenações \u0026 Trade-offs\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eConcatenação do CSS\u003c/li\u003e\n        \u003cli\u003eMais concatenação e trade-offs\u003c/li\u003e\n        \u003cli\u003ePor que?\u003c/li\u003e\n        \u003cli\u003eConcatenação de CSS\u003c/li\u003e\n        \u003cli\u003eConcatenação de JS\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eSprites\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003ePorque Sprites\u003c/li\u003e\n        \u003cli\u003eSprites PNG\u003c/li\u003e\n        \u003cli\u003eAutomação de Sprites\u003c/li\u003e\n        \u003cli\u003eProjeto: sprites CSS\u003c/li\u003e\n        \u003cli\u003eSprites em SVG\u003c/li\u003e\n        \u003cli\u003eAutomação de Sprites SVG\u003c/li\u003e\n        \u003cli\u003eProjeto: sprite SVG\u003c/li\u003e\n        \u003cli\u003e(opcional) Polyfill para símbolos SVG\u003c/li\u003e\n        \u003cli\u003e(opcional) Outras sprites SVG\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eInline de recursos\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eInline de recursos\u003c/li\u003e\n        \u003cli\u003eO tamanho real do HTML\u003c/li\u003e\n        \u003cli\u003eTamanho do HTML\u003c/li\u003e\n        \u003cli\u003eProjeto: inline de JS\u003c/li\u003e\n        \u003cli\u003eProjeto: inline de SVG\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eParalelizando requests\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eRequests paralelos\u003c/li\u003e\n        \u003cli\u003eImpactos da paralelização\u003c/li\u003e\n        \u003cli\u003ePorque paralelizar?\u003c/li\u003e\n        \u003cli\u003eHostname paralelo\u003c/li\u003e\n        \u003cli\u003eAnálise do impacto\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eCache HTTP\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eCache com Expires\u003c/li\u003e\n        \u003cli\u003ePrática do cache\u003c/li\u003e\n        \u003cli\u003eFingerprint dos assets\u003c/li\u003e\n        \u003cli\u003eCache alto nos servidores\u003c/li\u003e\n        \u003cli\u003eProjeto: revisões com gulp\u003c/li\u003e\n        \u003cli\u003eCache no GAE\u003c/li\u003e\n        \u003cli\u003eCache no nginx\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eConclusão\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eAnálise final\u003c/li\u003e\n        \u003cli\u003eAtalho no gulp\u003c/li\u003e\n        \u003cli\u003eSua análise final\u003c/li\u003e\n        \u003cli\u003eTranscrição das aulas\u003c/li\u003e\n        \u003cli\u003ePerformance é UX\u003c/li\u003e\n    \u003cul\u003e\n\u003c/details\u003e\n\n# Notas das aulas:\n\n* Projeto: Minificação  \n    No arquivo [Dockerfile](https://github.com/claudimf/alura_performance_web/blob/main/Dockerfile) adicione o comando de instalação do [gulp-cli](https://www.npmjs.com/package/gulp-cli):\n    ```sh\n    RUN npm install -g gulp-cli\n    ```\n    Criar rotas para visualizar o 'original' e a versão 'modificada' com gulp no servidor [server.js](https://github.com/claudimf/alura_performance_web/blob/main/server.js):\n\n    ```sh\n    var dist_path = __dirname + '/dist/';\n    ...\n    router.get(\"/original\",function(req,res){\n    res.sendFile(path + \"index.html\");\n    });\n\n    router.get(\"/modificada\",function(req,res){\n    res.sendFile(dist_path + \"index.html\");\n    });\n    ...\n    ```\n    Entrar na bash e executar o comando de minificar:\n     ```sh\n    docker-compose run --rm web bash gulp minify\n    ```\n\n    Subir a aplicação e verificar a [original](http://localhost:3000/original) e a [modificada](http://localhost:3000/modificada)\n\n* Projeto: gulp copy\n    Na bash do seu container remova a pasta 'dist/assets' e depois 'minifique', para isso rode:\n    ```sh\n    rm -rf dist/assets/\n\n    gulp copy minify\n    ```\n\n### Permissões de arquivos:\n\nAo se adicionar libs ou qualquer outro comando que crie arquivos dentro do contâiner Docker o proprietário para edição se torna o contâiner, sendo assim você precisará rodar o comando abaixo para alterar essas permissões e você poder editar:\n\n```sh\nsudo chown -R $USER:$USER .\n```\n\n# Exigências\n\n**:warning: Atenção:** É necessário que os desenvolvedores usem o Docker no seu ambiente de desenvolvimento.\n\n- **🛠 Modo Desenvolvimento Docker**\n    - :computer: [Linux Ubuntu LTS](https://ubuntu.com/download/desktop)\n    - 🐳 [Docker](https://docs.docker.com/engine/installation/) Deve estar instalado.\n    - 🐳 [Docker Compose](https://docs.docker.com/compose/) Deve estar instalado.\n    - **💡 Dica:** [Documentação do Docker](https://docs.docker.com/)\n\n# Instalando\n\n## 🐳 Modo Desenvolvimento com Docker\n\nApós instalar o docker e docker-compose, estando na pasta raiz do projeto, execute:\n\n```sh\ndocker-compose up\n```\n\nPara se certificar que os seus containers subiram corretamente, todos os containers deve estar com o status `UP`, execute:\n\n```sh\ndocker-compose ps -a\n```\n\nPara acessar o container da aplicação, execute:\n\n```sh\ndocker-compose run --rm web bash\n```\n\nPara derrubar e subir a instância do docker novamente, execute:\n\n```sh\ndocker-compose down \u0026\u0026 docker-compose up\n```\n\nPara visualizar o sistema basta acessar no navegador no endereço: [localhost:3000](http://localhost:3000/)\n\n# Referências utilizadas\n\n[1° Repositório para clonar o projeto inicial](https://github.com/alura-cursos/performance-web)\n\n[2° Performance Web I: otimizando o front-end](https://cursos.alura.com.br/course/otimizacao-performance-web)\n\n[3° Criar um projeto com Node + Docker](https://nodejs.org/en/docs/guides/nodejs-docker-webapp/)\n\n[4° Como Construir uma Aplicação Node.js com o Docker](https://www.digitalocean.com/community/tutorials/como-construir-uma-aplicacao-node-js-com-o-docker-pt)\n\n[5° Conteinerizando um aplicativo Node.js para desenvolvimento com o Docker Compose](https://www.digitalocean.com/community/tutorials/containerizing-a-node-js-application-for-development-with-docker-compose-pt)\n\n[6° ERRO: primordials is not defined](https://cursos.alura.com.br/forum/topico-erro-primordials-is-not-defined-106764)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaudimf%2Falura_performance_web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclaudimf%2Falura_performance_web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaudimf%2Falura_performance_web/lists"}