Bloxby has two major components: the front-end and the back-end. The back-end is built using PHP in general and the CodeIgniter (version 3) framework in particular. For more information regarding the CodeIgniter framework, please have a look at the official CodeIgniter website .

Developing the back-end

Developing the back-end part of Bloxby is straightforward, you change whatever PHP files you need to change and your changes will instantly appear in the application. If you’re planning to modify Bloxby’s back-end code, we strongly recommend doing this in such a way that would allow you to still be able to apply future updates without risking overwriting your customizations or breaking your application. To this end, we have implemented several features which allow you to do just that. To learn more about the recommended procedures to customize Bloxby’s back-end code, please read the following knowledge base articles.

Developing the front-end

Developing the front-end is slightly more complicated. The front-end of Bloxby is built using the standard front-end stack of HTML, Javascript and CSS (and some additional fonts, images, etc). All the assets used by the front-end can be found in the “/assets” folder.

Bloxby uses Webpack to generate the front-end files (also called “bundles”). This means that whenever you make a change to the front-end code, you will need to re-build the application by running Webpack.

To be able to use the Webpack, you will first need to make sure you have Node.js (version ≤ 14) and NPM installed (more info here ). You will also need to make sure you have all the used NPM modules and dependencies installed on your computer. To install those modules and dependencies, you will need to the following command: “npm install“.

To rebuild the front-end bundles, you would need to run the following command (make sure you’re in the Bloxby root folder): npm run build (npm run winbuild in Windows OS). Alternatively, you can run the Webpack dev server which will automatically recreates the bundles after every chance (saving you the time of having to rebuild manually every time you make a change). You start the Webpack dev server, run the following command: npm start  (npm run winstart in Windows OS).

Additional information regarding the Webpack build process can be found in the README.md file in the Bloxby root folder.

Webpack dev server config file

To be able to operate Webpack’s dev server, you will also need to provide a correct value for the “$config[‘webpack_dev_url’]” variable found in “/application/config/webpack.php”. This url is used to load the dynamic bundles rather than the static ones.