Using Laravel mix with Silverstripe
Laravel mix is a wrapper around webpack, I find it great to use when you need a compiler for your assets. This is a guide on how to setup laravel mix on a new SilverStripe-project.
Create a new Silverstripe-project with the following command:
composer create-project silverstripe/installer [your-project-name]
Open the project in your favorite editor and create a new .env file with the following lines, replace the values inside brackets [] with your own database-values:
Open the project in your favorite browser and run dev/build after the URL. Scroll down to the bottom of the page, make sure there are no errors while scrolling down.
Add a new folder called “laravel-mix-guide” inside /themes and add the following commands in the terminal:
cd laravel-mix-guide
npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
mkdir src && mkdir src/js && mkdir src/scss && touch src/scss/app.scss && touch src/js/app.js
You should have a new file inside your themes-folder named webpack.mix.js, open that file and add the following code:
Go back to your project root and add the following lines to your composer.json:
Write the following command in the terminal, make sure you are in the projects root when doing so:
composer vendor-expose
Head back to your theme-folder and add the following command in the terminal:
npm install cross-env --save-dev
Add the following lines inside your package.json:
Run the following command in the terminal:
npm run watch
Make sure you get a notification stating "Build successful" in your upper right corner.
Open your app.scss-file and add the following code just to make sure it is working:
Save that file and wait for the notification to show up, make sure that the app.css file inside public/_resources/themes/laravel-mix-guide has the same code.
Run the following command in the terminal:
mkdir templates && touch templates/Page.ss
Copy the following code and paste in your newly created Page.ss-file:
Open the projects theme.yml-file and change the line 'simple' to 'laravel-mix-guide', head back to your browser and run dev/build again. Wait for the page to load and check so no error occurs, remove dev/build from the url and you should see a white page with "Hello Laravel-mix!"
But wait, we just added background-color: red; to the body, yet my body is white? That is because we have not added the link to the css and js yet, to do this, we could either add the following line inside the <head> of Page.ss:
Reload the page and you should now see a red body, this is all good, but what if we want to add “cache-busting”?
Add another file called LaravelMixTrait inside /app/src and add the following code:
Add the following lines inside the PageController.php:
Open your Page.ss again and update the link to your css with the following line:
Head over to the browser and run dev/build again, when that has finished, go to your start-page, you should still have a red background on your page, and if you inspect the <header> you should see that the css file has a new parameter, ?id=xxx, xxx matches the following lines in your mix-manifest.json-file:
"/app.css": "/app.css?id=xxx
If you want to add your javascript in the same way, simply add the following line before your </body> in Page.ss:
Reload the page and you should see that your javascript is included as well.
The id-parameter will be updated every time you have changed and save a .scss file, same goes for the javascript.
Thats it, thanks for reading and following this guide.
Happy coding!