Truffle provides the truffle-default-builder npm package, which is termed the default builder for truffle. This builder exports an object, which has a build method, which works exactly like the previously mentioned method.

The default builder can be used to build a web client for your DApp, whose server only serves static files, and all the functionality is on the frontend.

Before we get further into how to use the default builder, first install it using this command:

npm install truffle-default-builder --save

Now change your configuration file to this:

var DefaultBuilder = require("truffle-default-builder"); 

module.exports = { 
  networks: { 
    development: { 
      host: "localhost", 
      port: 8545, 
      network_id: "10" 
    }, 
    live: { 
         host: "localhost", 
      port: 8545, 
      network_id: "1" 
    } 
  }, 
  build: new DefaultBuilder({ 
    "index.html": "index.html", 
    "app.js": [ 
      "javascripts/index.js" 
    ], 
    "bootstrap.min.css": "stylesheets/bootstrap.min.css" 
  }) 
};

The default builder gives you complete control over how you want to organize the files and folders of your client.

This configuration describes targets (left-hand side) with files, folders, and arrays of files that make up the targets contents (right-hand side). Each target will be produced by processing the files on the right-hand side based on their file extension, concatenating the results together, and then saving the resultant file (the target) into the build destination. Here, a string is specified on the right-hand side instead of an array, and that file will be processed, if needed, and then copied over directly. If the string ends in a "/", it will be interpreted as a directory and the directory will be copied over without further processing. All paths specified on the right-hand side are relative to the app/ directory.

You can change this configuration and directory structure at any time. You aren't required to have a javascripts and stylesheets directory, for example, but make sure you edit your configuration accordingly.

Here are the features of the default builder:

• Automatically imports your compiled contract artifacts, deployed contract information, and ethereum node configuration into the client source code
• Includes recommended dependencies, including web3 and truffle-contract
• Compiles ES6 and JSX files
• Compiles SASS files
• Minifies asset files