Block Development Webpack

The contents of this article may be outdated and no longer applicable to the newest version of Pagestead (version 1.1.0). We’ll keep this article around for a while for those who are using older versions of Pagestead, however the article will be deleted in the near future. For more up to date information on block management, please review the Managing Blocks & Components section.

Block templates are HTML files containing a single block (please note that every block sits in its own HTML file). You can use things like CSS, Javascript, images, fonts, etc in your blocks. Essentially, block templates are just typical HTML files.

Where to put your custom blocks

The block templates used by the application are loaded from the /elements folder, however the block templates and used assets (CSS, Javascript, images, fonts, etc) are copied to the /elements folder during the Webpack build process (to learn more about using Webpack with Pagestead, please read this article ) from the /assets/elements_starter , /assets/elements_professional or /assets/elements_enterprise folders . Therefor, we suggest to place your custom blocks in the /assets folder as well, so that when you run Webpack to rebuild the application, your changes will not get overwritten (since the entire /elements folder gets deleted and rebuild during the Webpack build process). We suggest to place your custom blocks in a folder using a similar naming convention, so something like /assets/elements_custom should do just fine. After creating your custom blocks inside the /assets folder, don’t forget to update the /webpack.config.js file to make sure the block templates and assets are copied over to the /elements folder during the Webpack build process. You can achieve this by replace the following line (around line 125) in /webpack.config.js:

{from: elements, to: __dirname + '/elements'},

with the following:

{from: 'assets/elements_custom', to: __dirname + '/elements'},

It goes without saying that using the method described above, you will be required to run Webpack before being able to use your blocks inside Pagestead. This poses two challenges/issues:

  1. You will be required to have Webpack installed and working and
  2. After every change to your blocks, you will need to run Webpack in order to see your changed blocks inside Pagestead

You could decide to create your custom blocks directly inside the /elements folder and therefor bypassing the Webpack build process. This will work fine as long as you’re not required to run Webpack (i.e. if you’re doing custom development on the front-end of Pagestead, this would pose a problem since you’ll be running Webpack to rebuild the application).

If you have Webpack installed and working, and you do prefer to use Webpack to handle your blocks, the second issue can easily be dealt with by using the Webpack dev server (more details on using Webpack’s dev server can be found here ).

Please note that Webpack only copies the block template files and used resources over from the /assets folder to the /elements folder; the blocks bundled with Pagestead themselves are not build using the Pagestead Webpack process. Describing how to build your template files using Webpack is beyond the scope of this article; however there are plenty great tutorials out there which describe the process in detail.

HTML/CSS Frameworks

Although the blocks bundled with Pagestead are built using Bootstrap 3, using Bootstrap, or any other framework for that matter, is not a necessity for building your custom blocks. You are free to use Bootstrap, any other framework or no framework at all. One advantage of choosing Bootstrap as your framework though, would be that you can use the existing /assets/js/modules/config.js configuration file as your starting point. Choosing a different framework is likely going to make configuring the application more complex.

Was this article helpful?

Related Articles

3 Comments

  1. Tanveer

    Do i need to run the webpack on my live server? can you please tell me what command do i need to use to run using ssh

  2. drbaranik

    Additional blocks for Pagestead (Starter and Professional) are now available

    mine is enterprice version, is this automatically update or i have to get it manually

Leave A Comment?

You must be logged in to post a comment.