Boilerplates to Accelerate Development

In this session, we’ll delve into the power of boilerplates in web development and their role in accelerating your development workflow. You’ll discover how a well-crafted boilerplate can streamline repetitive tasks, reduce setup time, and allow you to focus on building your application.I’ll share my experience and motivation for creating a custom boilerplate, explaining the key considerations for what to include or leave out to maximize efficiency. Finally, we’ll explore how to use Packagist to install your boilerplate with a single command, simplifying integration and ensuring consistent setups across projects.

Prev
Spark for interactive UIs

Transcript

1. Boilerplates to Accelerate Development Sean Smith
2. Who am I? • Solo developer https://caffeinecreations.ca • Website 101 Podcast https://website101podcast.com • Toronto Craft Slack https://caffeinecreations.slack.com/ • Photography Enthusiast https://vero.co/createsean
3. Overview • What is a boilerplate? • What to include and exclude • Documentation • Using Packagist
4. What is a Boilerplate? • Boilerplate is code or configuration that can be used over and over in order to save time. • It’s a template for your site building process • DRY
5. cuts out the repetition, I wouldn't make the salt and pepper for a recipe Kevin Nicholson - Freelancer
6. Utilizing a Craft CMS boilerplate for our web projects streamlines the development process and provides a solid foundation to build from. More importantly, it allows our team to focus on creating unique designs while expediting project timelines and enhancing overall workflow efficiency. Ashleigh – Project Manager
7. My Motivation • Tired of recreating the same configurations and settings over and over • Frustrated with opening different sites to crib code or settings • Save time – several hours at the beginning of a project
8. The Goal • The goal is to save you time when starting a new project. • DRY – code, config, channels, & fields
9. What to Include • Build process Vite, Laravel Mix, etc.. • Common site elements such as navbar, news section, homepage, contact page, etc • Content builder with common block types such as copy, video embed, related entries, slider • Hero options slider, basic, enhanced
10. What to Include • Plugins commonly used on every site you build CKEditor, Retcon, SEOmatic, Sprig, Knock Knock • Developer QOL plugins such as: Asset Rev, Environment Label, Control Panel CSS • Templates multiple options prebuilt and just uncomment. i.e. A standard navbar with dropdowns or an off-canvas menu
11. What to Exclude • Fields and sections that are likely to be one offs • Advanced Functionality multifaceted search, complex forms • Plugins that you do not use on every site For example Google Maps,
12. Documentation • Documentation Important to keep this updated • Code – include examples to help get set up or instructions for something that may not be obvious • Open to the public Be verbose and write even more documentation
13. Packagist • https://packagist.org • Useful if you want to make it easy for anyone to install with one line of code. • Running the create command will install vendor packages • Without packagist you can clone and do a few extra steps.
14. Packagist • You can also have the dotenv created and run craft commands as part of the install process. Add the following to the scripts section of your composer.json file. "scripts": { "post-root-package-install": [ "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" ], "post-create-project-cmd": [ "@php craft setup/security-key", "@php craft setup/app-id" ] }
15. Unseen Advantages • Conventions set standards and best practices • Accessibility prebuilt components are accessible • Documentation easy to onboard other developers
16. Disadvantages
17. Demo • Launch Demo • View starter github
18. Website 101 Podcast Podcast Episode about boilerplates https://tinyurl.com/boilerplates-for-web
19. My Boilerplate https://github.com/CreateSean/craft-starter One command – requires setting up packagist composer create-project createsean/craft-starter .
20. Get Started • Use my starter • Search Packagist and use another starter • Fork a starter and customize to your liking • Build a new starter from scratch
21. Resources • https://packagist.org • https://website101podcast.com • https://caffeinecreations.slack.com/ • https://github.com/CreateSean/craft-starter