Building SaaS Website #02: Installation

Welcome to the first step in our journey of building TotalGPT, a Total.js-based AI assistant website. In this series, our aim is to equip beginners with a deep understanding of Total.js by starting from scratch, avoiding prebuilt templates. This hands-on approach ensures that you grasp each concept, empowering you to build robust web applications independently.

If you missed the previous blog post, I highly recommend checking it out to understand the overall roadmap and goals for this project. It will provide you with a clear vision of where we’re heading and why each step, including this one, is crucial.

We’ll be using Total.js v5, the latest version as of January 2025. While v5 doesn’t introduce radical new features compared to v4, it brings significant improvements in performance, optimizations, and developer experience, making it the best choice for our project.

Prerequisites

Before we proceed, make sure you have the following:

1. Node.js and npm Installed: Total.js runs on top of Node.js, so having these installed is a must. If you’re new, visit the Node.js website to download and install the latest LTS version.

1. Familiarity with Server-Side JavaScript: While this blog is beginner-friendly, a basic understanding of JavaScript and server-side development will make your experience smoother.

Step-by-Step Installation Guide

Here’s how you can install and set up Total.js v5 to get started with your web application:

Step 1: Create a New Folder and Navigate Into It

Open your terminal or command prompt and run the following commands:

$ mkdir totalgpt && cd totalgpt

This creates a directory named totalgpt and navigates into it.

Step 2: Initialize a New Node.js Project

Inside the totalgpt directory, initialize a new Node.js project with:

$ npm init -y

This command creates a package.json file, which will manage dependencies and project metadata.

Step 3: Install Total.js v5

Install Total.js v5 via npm by running:

$ npm install total5

This will download and add the framework to your project.

Step 4: Write the Start Script

1. Create a file named index.js in the totalgpt directory.
2. Open the file in your preferred text editor and add the following code:

require('total5');

var options = {};

options.port = 5000; // Application runs on port 5000
options.release = false; // Use development mode

Total.run(options); // Start the Total.js application

This script sets up the Total.js application to run on port 5000.

Step 5: Run Your Application

Start your Total.js app by running:

$ node index.js

You’ll see log messages indicating that the application has started successfully.

Step 6: Access Your Application

Open your web browser and visit:

http://localhost:5000

At this stage, you might encounter a 404 error. Don’t worry—it simply means your app is running, but no routes have been defined yet.

Exploring Generated Files

When you start your app, Total.js creates the following files:

1. index.js.map:
   • Maps all app routing endpoints.
   • Currently, it will show an empty object {} since no routes are defined yet.

1. index.pid:
   • Contains the process ID (PID) of your running app in plain text.

1. index.js.json:
   • Generated after a short delay.
   • Includes useful statistics such as memory usage, app errors, and framework stats.
   • As we build more features, this file will become a helpful resource.

Note: If your entry file were named myapp.js, these files would be named myapp.js.map, myapp.pid, and myapp.js.json.

What’s Next?

Congratulations! You’ve successfully installed Total.js v5 and started your first application. While the browser currently shows a 404 error, this signifies that your app is running and ready for routes to be added.

In the next post, we’ll create your first "Hello, World!" application, define routes, and explore Total.js view engine basics. Stay tuned for more exciting steps as we continue building TotalGPT!

This guide ensures you're set up and ready to dive deeper into Total.js. Feel free to share your thoughts or ask questions in the comments section! 😊