Javascript Bundlers

Forge leverages a modern Jamstack continuous delivery workflow, enabling you to connect your Github repository to a Forge site. With each push, Forge runs the JavaScript bundler of your choice, preparing everything for deployment to our Global Content Delivery Network (CDN), which enhances the speed and performance of your site.

A JavaScript bundler is a tool that packages your JavaScript code and its dependencies into a single, manageable file. Bundlers like Webpack, Parcel, and Snowpack also offer functionalities like minification and transpiling, further optimizing your site for deployment.

Getting Started

To get started, go to your Site Settings > Hammer Cloud and select Javascript Bundlers.

When enabled, you can specify two properties:

  1. Build Command - this is the command that Forge will run to compile and export your code.
  2. Build Folder - this is the location that Forge will look for your compiled code, in order to complete the remaining deployment process.

For example, if you were using a simple default webpack site and npm you might use the following:

Build Command: npm run build

Output: /dist

Common Default Output Directory Location

Different bundlers have different default output directories:

Webpack - /distParcel - /distSnowpack - //build

These directories are the default locations where the respective bundlers store the bundled code. You can customize these locations by editing the configuration of your bundler.

For more information about each bundler, see the following resources:

Webpack Documentation

Parcel Documentation

Snowpack Documentation

Using Bundlers with JavaScript Frameworks

Different JavaScript frameworks often rely on specific bundlers and have unique build commands and output directory locations. Here are examples of how to set up some popular frameworks:

Next.js

Next.js uses Webpack as its default bundler.

  • Build Command: npm run build
  • Build Folder: /.next

Nuxt.js

Nuxt.js also utilizes Webpack by default.

  • Build Command: npm run generate
  • Build Folder: /dist

Gatsby

Gatsby leverages Webpack and has a specific command to build the project.

  • Build Command: gatsby build
  • Build Folder: /public

Gridsome

Gridsome, a Vue-based static site generator, uses Webpack.

  • Build Command: gridsome build
  • Build Folder: /dist

Please note that these are standard settings and might vary depending on your project's specific configuration. You may need to adjust the Build Command or Build Folder based on the custom settings or structure of your application.

For more detailed information on how to configure and optimize these frameworks for production, refer to their respective documentation:

Remember, when using any JavaScript framework with Forge, the key is to ensure that your Build Command corresponds to the command that generates the production-ready version of your site, and the Build Folder points to the directory where this built version is stored. This way, Forge can correctly prepare your site for deployment to the CDN.

Troubleshooting

If you encounter any issues, please check the following:

  • Ensure that your Build Command is correctly written.
  • Confirm that the Build Folder matches the output directory of your bundler.
  • Make sure you have the necessary dependencies installed for your bundler to run.