Skip to content
Example webpack-based app for Truffle (boilerplate)
JavaScript HTML
Branch: master
Clone or download
adrianmcli Merge pull request #21 from truffle-box/fix/port-mismatch
fix port mismatch and bump package-lock
Latest commit 6ef0903 Jul 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add stalebot Jan 16, 2019
app fix port mismatch and bump package-lock Jul 22, 2019
contracts remove usage of tx.origin for security reasons Jan 8, 2019
test remove .sol extension from artifact requires Jan 9, 2019
.gitignore add migrations Jan 8, 2019
LICENSE update README Jan 9, 2019
box-img-lg.png add box-specific files Jan 8, 2019
truffle-box.json add stalebot Jan 16, 2019

Webpack Truffle Box

This box is our most bare official implementation with Webpack.

Includes contracts, migrations, tests, user interface, and webpack build pipeline.


First ensure you are in a new and empty directory.

  1. Run the unbox command via npx and skip to step 3.

    npx truffle unbox webpack
  2. Alternatively, you can install Truffle globally and run the unbox command.

    npm install -g truffle
    truffle unbox webpack
  3. Run the development console.

    truffle develop
  4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.

  5. In the app directory, we build and run our frontend. Smart contract changes must be manually recompiled and migrated.

    // in another terminal (i.e. not in the truffle develop prompt)
    cd app
    npm run dev
  6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.

    // inside the development console.
    // outside the development console..
    truffle test
  7. To build the application for production, use the build script in the app folder. A production build will be in the app/dist folder.

    // ensure you are inside the client directory when running this
    npm run build


  • Where is my production build?

    The production build will be in the app/dist folder after running npm run build in the app folder.

  • Where can I find more documentation?

    This box is a marriage of Truffle and a Webpack setup. Either one would be a great place to start!

You can’t perform that action at this time.