DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Creating a Website (HTML, Tailwind CSS, JS, Parcel js)
Diego Paz
Diego Paz

Posted on

Creating a Website (HTML, Tailwind CSS, JS, Parcel js)

The final product

Check this repository the final Website.

Grow Consulting will help you identify the best opportunities for your company's growth.

Image description

Some dependencies that will help us on our way. See Package.json

parcel
tailwindcss
@mischnic/parcel-namer-preserve-structure -> Tries to retain the existing folder structure of your source files.
@parcel/service-worker @parcel/transformer-webmanifest -> It will allow us to obtain a pwa
lozad -> Lazy loader
parcel-reporter-multiple-static-file-copier

.parcelsrc File

{
    "extends": ["@parcel/config-default"],
    "transformers": {
        "*.ico": ["@parcel/transformer-raw"],
        "*.woff": ["@parcel/transformer-raw"],
        "*.woff2": ["@parcel/transformer-raw"],
        "*.webmanifest": ["@parcel/transformer-webmanifest"]
    },
    "namers": ["@mischnic/parcel-namer-preserve-structure"],
    "optimizers": {
        "*.html": ["parcel-optimizer-ogimage", "..."]
    },
    "compressors": {
        "*.{html,css,js,svg,map}": [
            "...",
            "@parcel/compressor-gzip",
            "@parcel/compressor-brotli"
        ]
    },
    "reporters": ["...", "parcel-reporter-multiple-static-file-copier"]
}
Enter fullscreen mode Exit fullscreen mode

At this point we have the js parcels correctly and can start with npm run dev

Necessary configuration with parcel js to obtain a pwa

Service Worker Register

navigator.serviceWorker.register(
Β  new URL('./sw.js', import.meta.url),
Β  {type: 'module'}
);
Enter fullscreen mode Exit fullscreen mode

Sw

import {manifest, version} from '@parcel/service-worker';

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(version)
      .then(cache => {
        return cache.addAll(manifest)
          .then(() => self.skipWaiting())
      })
      .catch(err => console.log('FallΓ³ registro de cache', err))
  )
})

self.addEventListener('activate', e => {
  const cacheWhitelist = [version]

  e.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName)
            }
          })
        )
      })
      .then(() => self.clients.claim())
  )
})

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request)
      .then(res => {
        if (res) {
          return res
        }
        return fetch(e.request)
      })
  )
})

Enter fullscreen mode Exit fullscreen mode

Manifest.json

{
  "name": "GROW",
  "short_name": "GROW",
  "description": "Suma un aliado en la mejora de la productividad de tu organizaciΓ³n. Nuestro equipo multidisciplinario te ayudarΓ‘ a identificar las mejores oportunidades de crecimiento para tu negocio",
  "background_color": "#fff",
  "theme_color": "#fff",
  "display": "standalone",
  "start_url": "./?utm_source=pwa",
  "orientation": "portrait",
  "id": "/",
  "lang": "es",
  "icons": [
    {
      "src": "./assets/images/favicons/grow-16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-57.png",
      "sizes": "57x57",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-114.png",
      "sizes": "114x114",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "./assets/images/favicons/grow-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

New programmer and javascript

Stop by this week's meme thread!