DEV Community: Habib Hinn

How to Generate a Static Site Using Remix Run Framework SSG

Habib Hinn — Sat, 12 Oct 2024 13:36:11 +0000

Remix Run is a modern, full-stack web framework that enables developers to build robust web applications with excellent performance. It’s designed to manage both client and server-side logic, focusing heavily on performance and SEO. While Remix is typically used for dynamic, data-driven applications, it also excels in building static pages with ease. In this guide, we'll explore how to create static pages using the Remix Run framework.

What is a Static Page?

A static page is a web page whose content doesn't change based on user interactions or external data. Once a static page is built, it remains the same for all users until you update it manually. Static pages are ideal for things like landing pages, blogs, and documentation sites, where the content remains relatively constant over time.

Prerequisites

Before we dive in, ensure that you have the following:

Node.js: Remix requires Node.js installed on your system.
Remix: If you haven’t already, you can install the Remix CLI using:

   npx create-remix@latest

Setting Up a Remix Project

First, you need to set up a Remix project. This can be done using the following command:

npx create-remix@latest remix-ssg

You will be prompted with some configuration options (such as deployment targets), but for static pages, the most common choice would be to use a simple "Remix App Server" or choose a "Deploy on Netlify" target for static site generation.

After the installation is complete, navigate to your new project:

cd remix-ssg
npm install

Project Structure Overview

Once you have the project set up, the folder structure will look something like this:

remix-ssg
├── app
│   ├── routes
│   │   └── _index.tsx
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── tailwind.css
│   └── root.tsx
├── public
├── vite.config.js
└── package.json

The main folder of interest is the app/routes folder. This is where Remix looks for files to create routes (or pages). Each file in the routes folder corresponds to a route in the application.

Creating a Application Pages

To create a static page in Remix, you can create a new file in the routes directory. For example, let’s create a static "About Us" page.

Create a new file about.tsx inside the app/routes directory:

   app/routes/about.tsx

Add the following content to the file:

    import { MetaFunction } from  "@remix-run/react";

        // Meta tags for SEO
    export  const  meta:  MetaFunction  = () => {
        return [
            { title:  "About Us - Remix SSG Example" },
            { name:  "description", content:  "Welcome to Remix SSG App Example!" },
        ];
    };

    export  default  function  AboutPage() {
        return (
            <div>
                <h1>About Us</h1>
                <p>This page was build by Remix Run as a static page</p>
            </div>
        );
    }

That’s it! This simple setup is enough to create a static "About Us" page.

Handling Links in SSG

After creating the pages that we want to build statically. Now we need to Link these pages by using: <Link reloadDocument to={'/about'}> or <a href={'/about'}> to do a full page reload when switching between the pages.

Generate Site Pages

The main purpose of generating static pages is to pre-render them as HTML files at build time by running a server locally. These pages are then saved and can be served directly from storage, eliminating the need for server processing (CPU) during runtime.

First Step we need to build the app by running npm run build
This will create a new folder called build

remix-ssg
├── app
├── build
│   ├── client
│   └── server
├── public
├── vite.config.js
└── package.json

Now we need to run the app and get our HTML pages and save them in build/client folder

To run the app we need to run npm run start command in terminal and we can see our app running on port 3000 (http://localhost:3000/) Now we need to visit all the routes and save the html content. To do so we can need to add the following file:

import  fs  from  "fs";
import  path  from  "path";
import { fileURLToPath } from  "url";
import  wget  from  "wget-improved";
import  waitPort  from  "wait-port";

const  __filename  =  fileURLToPath(import.meta.url); // get the resolved path to the file
const  __dirname  =  path.dirname(__filename); // get the name of the directory

const  baseURL  =  `http://localhost:3000`;
const  outputPath  =  `build/client`;

function  saveFile(fileName) {
        let  fullURL = `${baseURL}/${fileName}`;
        let  outputFileName  =  `${outputPath}/${fileName}`;
        if (fullURL.endsWith("/")) {
            outputFileName  =  `${outputFileName}index`;
        }
        let  download  =  wget.download(fullURL, `${outputFileName}.html`);

        download.on("end", function () {
            console.log(`Page ${fileName} build successfully`);
        });
        download.on("error", function (err) {
            console.log(err);
        });
}

function getRouteFromFileName(fileName) {
        let  parts  =  fileName.split(".");
        parts.pop();
        return  parts.join("/").replaceAll("_index", "");
}
await  waitPort({
        port:  3000,
        host:  "localhost",
});
const  directoryPath  =  path.join(__dirname, "app", "routes");
let  files  = [];
try {
        files  =  fs.readdirSync(directoryPath);
        files.forEach((file) => {
        const  route  =  getRouteFromFileName(file);
        saveFile(route);
        });
} catch (error) {
        console.error(error);
}

You can change the build command in package.json to the following which will do everything
"build": "remix vite:build && concurrently --kill-others --success first \"node generate-files.js\" \"npm run start\""

And Now we have the build file and static pages ready to deploy

Deploying Your Static Pages

You can deploy your static Remix app using platforms like Netlify, Vercel, or even GitHub Pages. For static site generation (SSG) with Remix, the deployment platform will statically render your pages at build time.

For example, to deploy to Netlify:

Install Netlify CLI:

   npm install -g netlify-cli

Link your project to Netlify:

   netlify init

Deploy:

   netlify deploy --build

Netlify will statically generate and deploy your Remix site!

Conclusion

In conclusion, generating static pages with the Remix Run framework is an efficient way to create fast, SEO-optimized websites. By pre-rendering pages at build time and serving them directly from storage, you eliminate the need for server-side processing, leading to faster load times and reduced server costs. Remix’s flexibility allows you to manage both static and dynamic content seamlessly. Whether you're deploying to platforms like Netlify, Vercel, or even GitHub Pages, Remix’s static site generation capabilities provide a powerful solution for building high-performance web applications.

Inspired By

This guide was inspired by insights shared in this post by Michael Jackson, co-creator of Remix. His thoughts on static site generation in Remix helped shape this article.

Source Code: https://github.com/HinnHabib/remix-ssg
Live Exmaple: https://remix-ssg.habibhinn.com
Original Link: https://habibhinn.com/blog/how-to-generate-a-static-site-using-remix-run-framework

From Angular to Remix: Route by route migration

Habib Hinn — Mon, 30 Jan 2023 20:44:25 +0000

In this tutorial, we will show you how to migrate an Angular application to Remix by running Angular Universal and Remix projects side by side on the same Express.js server. We will provide an example, source code, and screenshots to help you understand the process.

An example of the final application that contains Angular Universal and Remix running side by side on the same ExpressJS server can be found at: https://remix-angular.habibhinn.com/

When we run build commands for either framework, it will generate the server-side scripts and the client-side scripts. These scripts handle the rendering of the application on the server and the transfer of the rendered HTML to the client.

To start, we will use npm workspaces to manage multiple projects in the same repo. Create two subfolders - one for the Angular source code and one for the Remix source code. Also, we will create a build folder that contains the output bundle for both projects.

In order to change the Angular output build path, we need to update the angular.json file for both the build and server commands.

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "../build/browser/angular",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "tsconfig.app.json",
        "assets": ["src/favicon.ico", "src/assets"],
        "styles": ["src/styles.css"],
        "scripts": []
    },

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
        "outputPath": "../build/server/angular",
        "main": "server.ts",
        "tsConfig": "tsconfig.server.json"
    },

Also update outDir in tsconfig.ts:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../build/out-tsc",

Also in Remix, we will update remix.config.js:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
    ignoredRouteFiles: ["**/.*"],
    appDirectory: "app",
    assetsBuildDirectory: "../build/browser/remix",
    serverBuildPath: "../build/server/remix/index.js",
    publicPath: "/browser/",
};

Now, you will need to configure Express.js server to handle both client side javascript and server side scripts for both frameworks. In this tutorial we will update angular server to serve remix routes. (It can be done the other way)

Add to server.ts to handle client side scripts:

server.use(
    // Note: must match remix.config.js publicPath value
    '/browser', 
    // Note: must match remix.config.js assetsBuildDirectory value
    express.static('../build/browser/remix'), { 
        immutable: true,
        maxAge: '1y',
        })
    );

Also add server side scripts:

server.get(
     // Path or URL that should resolve to remix
    '/remix*',
     // Note: must match remix.config.js assetsBuildDirectory value
    createRequestHandler({
                // remix.config.js serverBuildPath
        build: require('../build/server/remix'),
    })
);

so the full code for the server.ts file should be:

export function app(): express.Express {
    const server = express();
    const distFolder = join(BROWSER_FILES_BASE_PATH, 'angular');
    const indexHtml = existsSync(join(distFolder, 'index.original.html'))
            ? 'index.original.html'
            : 'index';

    // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
    server.engine(
        'html',
        ngExpressEngine({
        bootstrap: AppServerModule,
        })
    );

    server.set('view engine', 'html');
    server.set('views', distFolder);

    server.use(
        '/browser',
        express.static(join(BROWSER_FILES_BASE_PATH, 'remix'), {
          immutable: true,
          maxAge: '1y',
        })
      );

    server.get(
        '/remix*',
        createRequestHandler({
          build: require('../build/server/remix'),
        })
      );

    // Example Express Rest API endpoints
    // server.get('/api/**', (req, res) => { });
    // Serve static files from /browser
    server.get(
        '*.*',
        express.static(distFolder, {
            maxAge: '1y',
        })
    );

    // All regular routes use the Universal engine
    server.get('*', (req, res) => {
        res.render(indexHtml, {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
        });
    });

    return server;
}

Not to switch easily between two frameworks for the users while navigating between application we will use anchor tag as it will do a full page refresh.
Remix:

<header className="bg-indigo-600">
    <nav className="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Top">
        <div className="flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none">
            <div className="flex items-center">
                <div className="ml-10 block space-x-8">

           <!-- Defined as anchor tag to do full page refresh -->
             <a
                    href={"/"}
                    className="text-base font-medium text-white hover:text-indigo-50"
                  >
                    Angular Application
                  </a>
                  <Link
                    to="/remix"
                    className="text-base font-medium text-white hover:text-indigo-50"
                  >
                    Remix Application
                  </Link>
                </div>
            </div>
        </div>
    </nav>
</header>

Angular:

<header class="bg-indigo-600">
    <nav class="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Top">
        <div
          class="flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none"
        >
          <div class="flex items-center">
            <div class="ml-10 block space-x-8">
              <a
                routerLink="/"
                class="text-base font-medium text-white hover:text-indigo-50"
              >
                Angular Application
              </a>
              <!-- Defined as anchor tag to do full page refresh -->
              <a
                href="/remix"
                class="text-base font-medium text-white hover:text-indigo-50"
              >
                Remix Application
              </a>
            </div>
          </div>
        </div>
    </nav>
</header>

Source code: GitHub
Original Article: https://habibhinn.com/blog/from-angular-to-remix-route-by-route-migration

Learn more

Remix
Angular

If you liked this, click the ❤️ so other people will see it. Follow me on Twitter and visit my website for more content!