JavaScript Bundlers

Learn how to use JavaScript bundlers with Forge to optimize your site's performance and development workflow.

Overview

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:

• Build Command - this is the command that Forge will run to compile and export your code.
• 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

Supported Bundlers

Forge supports the following JavaScript bundlers:

• Webpack - Most popular bundler with extensive plugin ecosystem
• Vite - Fast build tool with hot module replacement
• Parcel - Zero-configuration bundler
• Snowpack - Fast, modern bundler
• Rollup - Excellent for libraries and ES modules
• esbuild - Extremely fast JavaScript bundler

Common Default Output Directory Locations

Different bundlers have different default output directories:

• Webpack - /dist
• Vite - /dist
• Parcel - /dist
• Snowpack - /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.

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

Vite

Vite is a modern build tool that offers extremely fast hot module replacement and optimized builds.

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

Performance Benefits

Using JavaScript bundlers provides:

• Reduced HTTP requests
• Minified and optimized code
• Tree shaking to remove unused code
• Code splitting for better caching
• Source maps for debugging
• Global CDN deployment for enhanced speed

Build Process

When using bundlers with Forge:

• Bundlers run during the build process
• Output files are automatically deployed to the CDN
• Source maps are generated for debugging
• Assets are optimized for production
• Continuous delivery with each GitHub push

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
• Test builds locally before deployment
• Check the Forge deployment logs for specific error messages

Additional Resources

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

• Webpack Documentation
• Vite Documentation
• Parcel Documentation
• Snowpack Documentation

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

• Next.js Documentation
• Nuxt.js Documentation
• Gatsby Documentation
• Gridsome Documentation