How to Use Hammer: A Build Tool for Browser and Node Applications

Aug 30, 2021 | Programming

Welcome to your go-to guide for using Hammer, a powerful command line tool designed to streamline the development workflow for both browser and Node applications. With an emphasis on rapid application development, Hammer reduces complexity by consolidating various development dependencies into a single, efficient tool.

Installation

To get started, you’ll need to install Hammer globally using npm. Open your command line interface and run the following command:

shell
$ npm install @sinclair/hammer -g

Creating Your First Project

Before we dive into functionality, let’s set up a basic index.html file. Here’s what it should look like:

html


  
    
    
  
  
    
  

Usage

Once you’ve created your index.html file, you can build it using Hammer with this command:

shell
$ hammer build index.html

Upon successful execution, you should see “Done” in your terminal.

Understanding Hammer’s Functionality

Think of Hammer as a skilled chef in a kitchen, where different cooking techniques and ingredients are represented by its multiple commands. Just as a chef perfects different recipes, Hammer allows you to utilize various functionalities for different types of application development.

  • Serve: Starts a development server that reloads pages upon saving changes. Use it as follows:
  • bash
    $ hammer serve index.html
    
  • Run: Initiates a Node process that restarts when files change. Example:
  • bash
    $ hammer run index.ts
    $ hammer run index.ts "arg1" "arg2"  // Using quotes for arguments
    
  • Watch: Starts a watch process for your compiler.
  • bash
    $ hammer watch worker.ts
    
  • Monitor: Executes shell commands on file changes. Example:
  • bash
    $ hammer monitor index.ts "deno run --allow-all index.ts"
    

Automating Workflows

Hammer also comes equipped with a built-in task runner. You can create tasks using JavaScript functions in a file named hammer.mjs. Hammer searches for this file and sets up commands based on the exported functions. Here’s how you can run a Hammer website and server watch process in parallel:

typescript
// hammer.mjs
export async function start() {
    await Promise.all([
        shell("hammer serve apps/website/index.html --dist dist/website"),
        shell("hammer run apps/server/index.ts --dist dist/server")
    ]);
}

Execute this with:

bash
$ hammer task start

Working with Shared Libraries

If you are working on a mono repository project, you can import shared libraries by setting up the tsconfig.json file, which allows your applications to easily access shared components.

javascript
// tsconfig.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@lib/shared": ["lib/shared/index.ts"]
        }
    }
}

Command Line Interface (CLI)

Hammer provides several commands to execute various actions:

  • $ hammer run : Runs a script.
  • $ hammer build : Builds the specified file or folder.
  • $ hammer watch : Starts watching files or folders.
  • $ hammer serve : Serves files or folders.
  • $ hammer monitor : Monitors file changes and runs shell commands.
  • $ hammer task : Runs specified tasks.
  • $ hammer version : Displays the current version of Hammer.
  • $ hammer help : Provides help information about commands.

Troubleshooting

If you encounter issues, here are a few troubleshooting tips:

  • Ensure you have the right version of Node.js and npm installed.
  • Check for typos in your command syntax.
  • If the server fails to load, try running hammer serve again after fixing any syntax errors in your HTML or scripts.
  • For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox