Photo by Patrick Perkins on Unsplash

Developing

Next up, make it easy to develop

Scripts

In your package.json we have add some scripts. This will setup a simple way to run the code. First we install npm-run-all

npm install npm-run-all

Add a couple of scripts to your package.json

{
  "scripts": {
    "start": "npm-run-all --parallel dev:*",
    "dev:eleventy": "ELEVENTY_ENV=development eleventy --serve --quiet",
    "dev:encore": "encore dev --watch",
  }
}

Now when we run npm run start we have a local dev server setup. Cool! But no styles or javascript.

Add encore files

Now we have to add encore files in your 11ty templates. Add a _data/encore.js data file in your project. This will read and add the locations for the encore files. The basics are in entrypoints.json as setup before in your webpack encore config.

const fs = require('fs');

module.exports = function () {
  const data = fs.readFileSync('./build/entrypoints.json', 'utf8');
  const entrypoints = JSON.parse(data);

  return entrypoints.entrypoints;
};

Now we add the css files.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    { %- for css in encore.app.css -% }
        <link rel="stylesheet" href="" type="text/css">
    { %- endfor -% }
<body>

And the javascript files.

{ %- for js in encore.app.js -% }
    <script src=""></script>
{ %- endfor -% }

Now when we run

npm run start

We should see a website, styles and javascript.