In this part we are going to add a little style to our app. We will use Symfony Encore to build our front end CSS and JS and then update our Dokku configuration to build our front end during deployment.

Create an Encore Branch

Just like last time, we will create a new branch to build our changes in:

git checkout -b encore

Installing Encore

Prerequisites

Like the documentation says, you will need at leastNodeJS installed on your system. Though the documentation also recommends yarn, I am more of an NPM person and will be using that.

Installing Encore is done with following commands:

composer req encore
npm install

SASS setup

First we uncomment .enableSassLoader() in the webpack.config.js file and then we need to install the SASS requirements. Run Encore and it will output a bunch of errors. Scroll to the top of the errors and you will see something like:

After everything is installed, we need to convert our CSS to SASS. First, rename assets/css/app.css to assets/css/app.scss. Next, edit assets/js/app.js to and change require('../css/app.css'); to require('../css/app.scss');.

Now we can run npx encore dev to build three files, runtime.js, app.css, and app.js.

npx vs. npm

npm manages packages but doesn’t make life easy executing any. npx is a tool for executing packages. When executables are installed via npm packages, npm links to them and then you can run them with npx.

You could also run Encore with node_modules/.bin/encore dev, but I find npx encore dev nicer.

Run npx encore dev, restart our server, and reload our browser and we should see a plain, yet utterly functional webpage.

If everything is working right, we should commit everything to our repository:

git add .
git commit -m "Add Encore and basic styles"

Building the Front End in Production

Our application currently is built using the PHP buildpack when we push to Dokku. The PHP buildpack does not include NodeJS, so we need to tell Dokku to also include the NodeJS buildpack. To do this, we add a .buildpacks file to the root of our app: