Lightning-pages NPM

npm

LightningPages Documentation

Introduction

LightningPages is a Node.js package designed for creating high-speed, optimized landing pages with enhanced features such as automated image processing, CDN integration, and security enhancements. It's ideal for marketing landing pages, rapid web development, and anyone looking to host fast and efficient landing pages for advertising purposes.

Installation

npm install lightning-pages

or using Yarn:

yarn add lightning-pages

Importing LightningPages

import { LightningPages } from 'lightning-pages';

Configuration and Setup

Environment Variables

CDN_REGION: The region of your DigitalOcean space.
CDN_ACCESS_KEY: Your DigitalOcean access key.
CDN_ACCESS_SECRET: Your DigitalOcean access secret.
CDN_BUCKET_NAME: The name of your DigitalOcean bucket.
SGTM_URL: URL for server-side Google Tag Manager.
PORT: The port number your server will listen on.

Creating a DigitalOcean CDN

Sign up for DigitalOcean and create a Space.
Set up a CDN for the Space and note down the endpoint.
Generate and store your access keys securely.

Initializing the LightningPages Application

const LPApp = new LightningPages({
  script_sources: ['https://www.googletagmanager.com', 'https://connect.facebook.net', "https://script-cdn.example.com"],
  img_sources: [
    'https://www.facebook.com', // for facebook tracking
    'https://images.somecdn.com' // some image cdn example
  ],
  connect_sources: [
    'https://analytics.google.com', // google analytics
    'https://www.google-analytics.com', // google analytics
    "https://some-api-service.example.com" // example api service
  ],
  compression: { threshold: 1024 },
  cdn_baseurl: 'https://bucket-name.region.digitaloceanspaces.com',
  projectRoot: __dirname // optional, defaults to process.cwd()
});

Core Features

Image Handling

Automatically watches the /public/images folder.
Converts new images to WebP format for optimized loading.
Synchronizes with DigitalOcean CDN for global distribution.

Compression and Performance

Uses @fastify/compress for compressing responses.
Improves loading times and PageSpeed score.

Security with Helmet

Implements @fastify/helmet for basic security setups.
Configures Content Security Policy (CSP) directives for scripts, images, and connections.

CSS Cache Buster

Watches CSS file for changes.
Updates the global CSS cache on modification.

Creating Custom Endpoints for EJS Templates

Serving a Static EJS Page

LPApp.page('/about', async (req, reply) => {
  const data = {
    domain: 'Your Domain',
    title: 'About Us',
    css: LPApp.getPageCSS(),
    otherData: 'Additional data if needed'
  };

  return reply.view('views/about.ejs', data);
});

In this example, the /about route serves a static EJS page named about.ejs. We pass an object containing data like domain, title, and CSS, which the EJS template can use.

Dynamic Page Rendering Based on URL Parameters

LPApp.page('/:filename', async (req, reply) => {
  // Retrieve filename from the URL parameter
  // @ts-expect-error
  const filename = `${req.params.filename}.ejs`;

  // Additional logic to determine domain and title based on the filename or other criteria
  const { domain, title } = someFunctionToDetermineDomainAndTitle(filename);

  // Checking if the file exists
  const fullFilePath = path.join(LPApp.projectRoot, 'views', filename);
  const exists = fs.existsSync(fullFilePath);

  if (exists) {
    return reply.view(filename, {
      domain,
      title,
      env: process.env,
      css: LPApp.getPageCSS()
    });
  } else {
    // Fallback if the requested file does not exist
    return reply.code(404).send('Page not found');
  }
});

Here, the /:filename route dynamically serves EJS files based on the URL parameter. The filename is extracted from the URL and used to render the corresponding EJS file. If the file doesn't exist, it returns a 404 error.