Cómo clonar un sitio web (descargar HTML, CSS, JavaScript, fuentes e imágenes) usando Website Scraper en Node.js

Cómo clonar un sitio web (descargar HTML, CSS, JavaScript, fuentes e imágenes) usando Website Scraper en Node.js

¿Cuántas veces, como desarrolladores frontend, decidimos implementar una copia de alguna característica que un sitio web de terceros tiene en nuestro propio sitio web? Por lo general, hago esto mucho, especialmente cuando no hay una alternativa de código abierto para la función y no quiero escribirla desde cero porque tomaría mucho tiempo terminar con algo decente. La forma más fácil de hacer esto es leyendo el código fuente de una página web, usando CtrlUen Chrome, por ejemplo, leyendo los archivos JavaScript y siempre que no estén minificados (en sitios web que venden plantillas, por ejemplo).

Esto solo es incómodo cuando hablamos de resaltado de código, ya que no puedes comparar el resaltado de sintaxis ofrecido por el navegador con el ofrecido por tu IDE favorito como Visual Studio Code, Netbeans, etc. Por lo tanto, sería genial si pudieras descargar una copia del código y los recursos del sitio web para manipularlo localmente, ¿verdad? Gracias a un script bastante útil que usa Puppeteer, esto se puede hacer fácilmente en solo minutos (y segundos después de su implementación). En este artículo, te explicaremos cómo implementar fácilmente tu propio clonador de sitios web con Node.js.

1. Instalar Website Scrapper Puppeteer

Una de las ventajas más valiosas de usar un script que se basa en Puppeteer, una versión sin interfaz grafica de Chromium, es que no solo podrás copiar funciones de sitios web estáticos que implementan JavaScript simple o incluso jQuery, sino que también podrá descargar el contenido y los recursos generados por páginas dinámicas que usan React o angular. Instala la biblioteca website-scraper-puppeteer usando npm en su terminal:

npm install website-scraper website-scraper-puppeteer

Para obtener más información sobre este proyecto, visita el repositorio oficial en Github aquí. Este complemento, básicamente, inicia Chromium en modo sin interfaz grafica, que simplemente abre la página y espera hasta que se cargue toda la página. Está lejos de ser ideal porque probablemente debas esperar hasta que se cargue algún recurso o hacer clic en algún botón o iniciar sesión.

2. Crea un script de descarga

Después de instalar el complemento en su directorio de trabajo con NPM, solo necesitará crear un archivo javascript con el código que descargará algún sitio web. Crea el archivo index.js y coloca el siguiente código dentro:

// index.js
const scrape = require('website-scraper');
const PuppeteerPlugin = require('website-scraper-puppeteer');
const path = require('path');

scrape({
    // Provide the URL(s) of the website(s) that you want to clone
    // In this example, you can clone the Our Code World website
    urls: ['https://ourcodeworld.com/'],
    // Specify the path where the content should be saved
    // In this case, in the current directory inside the ourcodeworld dir
    directory: path.resolve(__dirname, 'ourcodeworld'),
    // Load the Puppeteer plugin
    plugins: [ 
        new PuppeteerPlugin({
            launchOptions: { 
                // If you set  this to true, the headless browser will show up on screen
                headless: true
            }, /* optional */
            scrollToBottom: {
                timeout: 10000, 
                viewportN: 10 
            } /* optional */
        })
    ]
});

El código anterior importará las bibliotecas instaladas y el asistente de ruta de Node.js (para crear una ruta absoluta del directorio actual). Llamaremos al método scrape, proporcionando como primer argumento un objeto con la configuración requerida para comenzar con la clonación del sitio web. Las opciones más importantes son la propiedad urls, que espera una matriz de cadenas de texto, donde cada elemento es una URL web de la página del sitio web que deseas clonar. La opción de directorio corresponde a la ruta del directorio local donde se debe colocar el contenido del sitio web. La opción de plugins cargará el complemento pupeteer para el scrapper normal con el fin de clonar sitios web correctamente dinámicos.

3. Ejecutar secuencia de comandos

Finalmente, abre tu terminal y cambia al directorio del script que acabas de escribir y ejecútalo:

node index.js

Esto clonará el sitio web deseado, en este caso Our Code World. Una vez finalizado, encontrarás en el mismo directorio del script el nuevo directorio con todo el JavaScript, HTML y CSS del sitio web. Por ejemplo, clonar Our Code World generaria una estructura similar a:

./
├── CK7DK53I.json
├── CK7I4KJM;CK7IP27L
├── css/
│   ├── bootstrap.css
│   ├── cookieconsent.min.css       
│   ├── custom.css
│   ├── font-awesome.min.css        
│   ├── magnific-popup.css
│   ├── simple-line-icons.css       
│   ├── slick.css
│   └── style-dark.css
├── favicon.ico
├── fonts/
│   ├── Simple-Line-Icons.eot       
│   ├── Simple-Line-Icons.svg       
│   ├── Simple-Line-Icons.ttf       
│   ├── Simple-Line-Icons.woff      
│   ├── Simple-Line-Icons.woff2     
│   ├── fontawesome-webfont.eot     
│   ├── fontawesome-webfont.svg     
│   ├── fontawesome-webfont.ttf     
│   ├── fontawesome-webfont.woff    
│   ├── fontawesome-webfont.woff2   
│   ├── fontawesome-webfont_1.eot   
│   └── sprite.svg
├── images/
│   ├── articleocw-5c5a2906da73d.jpg
│   ├── articleocw-5c8fb0eab08af.png
│   ├── articleocw-5c8fe4b534e04.jpg
│   ├── articleocw-5cb14f9ea4cfa.png
│   ├── articleocw-5cb1f4b2bd76b.png
│   ├── articleocw-5cdc8d904e6b9.jpg
│   ├── articleocw-5cdde93a04430.png
│   ├── articleocw-5ce040e91c1a8.png
│   ├── articleocw-5d040d2ec3975.png
│   ├── articleocw-5d200b5b06504.png
│   ├── articleocw-5d45c528f0103.webp
│   ├── articleocw-5d69328bac9a2.webp
│   ├── articleocw-5da07b41aa587.png
│   ├── articleocw-5db79e7faa2c5.webp
│   ├── articleocw-5de93b3040ac4.webp
│   ├── articleocw-5e1df41d2e35b.webp
│   ├── articleocw-5e3caa198aab8.webp
│   ├── articleocw-5e3d7b2a01256.webp
│   ├── articleocw-5e3dbabbcff04.webp
│   ├── articleocw-5e3dd0faa3106.webp
│   ├── articleocw-5e4162f1d2db6.webp
│   ├── articleocw-5e418ee7e81b4.png
│   ├── bestfreehtmlcsstemplates_banner_quad.png
│   ├── graph-bg.png
│   ├── hero-slide-1.jpg
│   ├── hero-slide-2.jpg
│   ├── hero-slide-3.jpg
│   ├── home_bg.jpg
│   ├── jobble.png
│   ├── login_register_bg.jpg
│   ├── login_register_bg_1.jpg
│   ├── main-news-banner__bg.jpg
│   ├── mini_ads.png
│   ├── mini_bestfreehtmlcsstemplates.png
│   ├── mini_wrapbootstrap.png
│   ├── ocw_logo_255.png
│   ├── page-heading-pattern.png
│   ├── page-heading.jpg
│   ├── rosterv3_player_01-bg.png
│   ├── single-post-img5.jpg
│   └── team-roster-slider-bg.jpg
├── index.html
├── js/
│   ├── adsbygoogle.js
│   ├── analytics.js
│   ├── bootstrap.bundle.js
│   ├── bsa.js
│   ├── cookie.js
│   ├── cookieconsent.min.js
│   ├── core.js
│   ├── custom.js
│   ├── init.js
│   ├── integrator.js
│   ├── integrator_1.js
│   ├── jquery.min.js
│   ├── monetization.js
│   ├── osd.js
│   ├── pro.js
│   ├── s_83085e49dfeedee6628ee5a7d7cd7359.js
│   └── show_ads_impl_fy2019.js
├── js_1/
├── raw_83a93c31c68198a3762e2237ff33e529.html
├── raw_b54f5852f835e7a023fcacceb1b6473c.html
└── zrt_lookup.html

Asegúrate de eliminar todo el JavaScript de anuncios, videos y analytics que puedas encontrar en algunos sitios web para evitar la excepción de JavaScript que generaría excepciones en el sitio web clonado.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable