Building SaaS Website #06 Static Files

Welcome back to our series on building a TotalGPT SaaS website! In this post, we’ll explore static files in Total.js. Static files are an essential part of any web application, as they include resources like stylesheets, JavaScript files, images, and fonts that are served directly to the client.

By the end of this post, you’ll understand:

1. What static files are in Total.js
2. How the Total.js server automatically resolves static files
3. How to define custom file routes
4. How to map static files in plugin-specific public folders

What Are Static Files?

In Total.js, static files are files that don’t change dynamically during runtime and are directly served to clients. These include:

• CSS files: For styling the frontend
• JavaScript files: For client-side logic
• Images, fonts, and other media files

Example of Static Files

Below are some examples of typical static files in a Total.js application:

CSS (Styling)

/* public/css/style.css */
body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

JavaScript (Client-Side Logic)

/* public/js/script.js */
// Client-side JavaScript
console.log('Hello from the client-side!');

These files are placed in the public/ folder of your Total.js project. The server automatically handles requests for these files without the need to define explicit routes.

How Total.js Automatically Resolves Static Files

When a client makes a request for a file with an extension (e.g., .css, .js, .jpg), Total.js assumes that the file resides in the public/ folder by default.

Example

• A request to http://localhost:8000/css/style.css will be resolved to /public/css/style.css.
• Similarly, http://localhost:8000/js/script.js maps to /public/js/script.js.

This behavior is automatic—you don’t need to define routes for these static files. The Total.js server identifies the file type based on the request URL and serves it from the public/ directory.

Custom File Routes

While automatic resolution is convenient, Total.js also allows you to define custom routes for static files. This is especially useful for dynamic file generation or custom file handling logic.

Defining File Routes

Here’s how you can define custom file routes:

// File: /controllers/example.js

exports.install = function() {
    ROUTE('FILE /documents/*.*', handle_documents);
    ROUTE('FILE /images/*.jpg', handle_images);
};

// Serve document files
function handle_documents($) {
    $.file('/path/to/file.pdf'); // Serve a specific file
}

// Serve images with additional processing
function handle_images($) {
    // Add custom logic here (e.g., resizing, watermarking)
    console.log('Serving an image');
    $.file('/path/to/image.jpg');
}

Explanation

1. ROUTE('FILE /documents/*.*', handle_documents):

Handles requests for files in the /documents/ folder with any file extension.

1. ROUTE('FILE /images/*.jpg', handle_images):

Processes files in the /images/ folder but limits them to .jpg files.

1. Custom Logic:

Use the $ object to dynamically generate or modify the file before serving it.

Static Files in Plugins

Total.js supports a modular architecture using plugins, which are like mini-projects inside your main project. Plugins can have their own public folder for static files, separate from the main public/ directory.

Defining Plugin-Specific Static Files

Let’s say you have a plugin for a dashboard. You’ll place the plugin in the plugins/ folder, and its folder structure might look like this:

plugins/
  dashboard/
    public/
      css/
        style.css
      js/
        dashboard.js
    index.js

To serve static files from a plugin’s public folder, Total.js uses a special naming convention. Prefix the plugin name with an underscore (_) in the URL.

Example

• Request: http://localhost:8000/_dashboard/css/style.css
• Mapped To: /plugins/dashboard/public/css/style.css

The Total.js server automatically resolves this path to the plugin’s public folder. This is a powerful feature that allows you to organize your project into modular components.

Key Takeaways

1. Automatic Static File Handling:

Total.js automatically resolves static files from the public/ folder based on the request URL.

1. Custom File Routes:

You can define custom routes for static files to add dynamic processing or custom logic.

1. Plugin-Specific Static Files:

Plugins can have their own public folders, and you can access these files using URLs prefixed with an underscore (_).

In the next post, we’ll dive deeper into plugins, exploring how they work, how to create them, and how to integrate them into your Total.js application. Stay tuned!