Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add blog post about Symfony Webpack Encore. #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add blog post about Symfony Webpack Encore. #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions source/_posts/2019-03-23-using-symfony-webpack-encore-with-sculpin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: "Using Symfony Webpack Encore with Sculpin"
author:
shortname: Rae
name: Rae Knowler
twitter: RaeKnowler
---

The [Sculpin Blog Skeleton](https://github.com/sculpin/sculpin-blog-skeleton) is a template for creating a blog with Sculpin. It's used in the [Get
Started](https://sculpin.io/getstarted/) tutorial on sculpin.io, making it an important part of the Sculpin experience for many users. Until recently,
the Blog Skeleton handled JavaScript assets by installing components via Composer. It's now been updated to use Symfony's
[Webpack Encore](https://symfony.com/doc/current/frontend.html) library instead.

Three of us at [Liip](https://www.liip.ch/en), [Christian Riesen](https://twitter.com/christianriesen), [David Buchmann](https://twitter.com/dbu) and
I, had a hackday to work on Sculpin. [Kevin Boyd](https://twitter.com/beryllium9) offered us some suggestions of where to start, one of which was the
move to Webpack: a more modern way of handling JS and CSS assets.

Of course, you *can* make a website without any JS at all, but even a simple website needs some styling to look nice. The Blog Skeleton, which isn't
meant to look fancy, uses jQuery, Bootstrap and HighlightJS as well as a little custom CSS. With more dependencies, keeping everything organised can
get difficult. Encore takes all your CSS and JS files, as well as their dependencies, and bundles them up into one of each that you can link
to in your HTML (or Twig) templates.

It was simple to install Encore and configure it to work with Sculpin's file structure. Now, anyone building their blog using the Blog Skeleton as a
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the "simple" can be deterring for people trying to do this and not figuring out how to do it (see "belitteling language"). maybe instead say "You can see the changes that where necessary to install Encore and configure it to work with Sculpin's file structure in this blogpost." - that would also help people who want to do this themselves.

base can add their own JS and CSS in the default files, add require statements for any external libraries they want to use, and run Encore. The
links in the base Twig template won't change, but the new code will all be included.

We also spent some time cleaning up the Sculpin documentation in several places:

- The Sculpin Blog Skeleton README is now as small as possible, only what's needed to get the app up and running.
- The [Basic Project](https://sculpin.io/documentation/basic-project/) page on sculpin.io had a lot of information removed that duplicated the Get
Started tutorial. Now it explains the basic concepts of Sculpin more clearly.
- Documentation for using Webpack Encore with Sculpin has been added in the Basic Project page as well.

These changes will make it easier to get started using Sculpin to build a modern static website.