Guide 00 · Developer docs

Core dna for site builders

Read this guide first. Core dna is hosted, so there is nothing to install; your repository holds only templates and front-end assets; and a new kind of page starts in the admin, with a layout. In half a day, from what the platform is to a page you built, deployed and rendered in Smarty or Twig.

L0
Unit 02 · From zero to a deployed change

Finding and running the build

From zero to a deployed change Page 11 of 28 Updated

Core dna sites build their front end with webpack or with gulp, and the repository says which. How to tell in a minute from package.json and the build configuration, the commands to run, and why you run the production build once before changing anything.

Who this is for. A developer about to change a site's CSS or JavaScript for the first time. Not knowing which build a repository uses is one of the two things that waste a first day. After this page you will know which build the site uses, how to run it, and whether your toolchain produces what is committed.

Which runner

You findThe runnerThe production build is usually
A .build/ folder with webpack.*.js files, or webpack.*.js at the top levelwebpacknpm run prod, often also available as npm run build
config/gulp.js, and scripts that call gulp --gulpfile config/gulp.jsgulpnpm run build

Whichever you find, the scripts in package.json are the authority. Two real shapes:

JSON package.json (webpack) 
"scripts": {
  "dev": "webpack --config .build/webpack.dev.js --progress",
  "prod": "webpack --config .build/webpack.prod.js --progress",
  "build": "npm run prod",
  "watch": "webpack --config .build/webpack.watch.js"
}
JSON package.json (gulp) 
"scripts": {
  "start": "gulp --gulpfile config/gulp.js",
  "dev": "cross-env NODE_ENV=development npm run start -- dev",
  "build": "cross-env NODE_ENV=production npm run start -- build"
}

Run the production build once, before changing anything

If the repository names a Node version, in an .nvmrc file or the engines field of package.json, use it. Then install exactly what the lock file records, build, and look at what changed:

Shell 
npm ci
npm run build    # or npm run prod: whichever package.json names
git status

Nothing changed: your toolchain produces what is committed, and you can start.

The build output changed, though you changed nothing: either your toolchain differs from the one that last built it (a different Node version, a dependency resolved differently), or someone committed source changes without building. Find out which before your first commit; otherwise that commit carries changes that are not yours, and the next person to build undoes them.

The build failed: fix the toolchain now, while nothing is at stake. A missing dependency or the wrong Node version is far easier to find on a clean checkout than in the middle of a change.

Development builds and watching

Most repositories also have a dev script, and some a watch script that rebuilds on every save. Use them while you work, but commit the output of the production build: a development build is larger, and is not what the other developers' builds will produce.

Go deeper
GuideThe build output is committed and served GuideWebpack and gulp builds GuideBuild before you push FAQMy CSS or JS change is not appearing

Was this page helpful?

Your answer goes to the docs team.