Craft CMS as a free invoice tool for freelancers
This post explores a workflow to manage and create custom PDF invoices in Craft. We'll go through the process on how I personally create my invoices and offers with the help of Craft.
When I started doing some freelance work, I was looking into possible online tools to generate PDF invoices. I quickly got lost in the massive amount of available tools, some free and some with paid plans. I was overwhelmed and it started to get too complicated very fast. I only needed a basic toolset to begin with, but still wanted to flexibility to add new features when needed.
All the tools I found were either too complicated, had too much features or too little features and very little room for personalization. That's when I decided I needed a tool of my own. Craft to the rescue!
Setup an invoices section
I started with creating a section to contain my invoice entries. First few fields I have set up are for client info, invoice date, a lightswitch whether or not the client has paid, etc.
The part that contains the invoice details looks like this:
The screenshot above shows 2 fields: a table for each section in the invoice. And a third party field that automatically calculates my invoice total (courtesy of Preparse). The twig code for the Preparse field is the following
{% set invoiceTotal = 0 %}
{% for row in element.invoiceDetails %}
{% set invoiceTotal = invoiceTotal + row.amount %}
{% endfor %}
{{ invoiceTotal }} EURYou can use Craft's ability to modify entry sources to get a better overview of all your invoices.
Create your PDF template
Once you have your section set up the way you like it, we need to start creating our template that will render our invoice. Since we're using Craft, it's completely up to you how you want to style your template. I prefer Tailwind for these kinds of pages, it allows you to get results really fast. Below is a slightly modified example of something that I use myself.
I didn't share the Twig templating code since there is not much to it. The most important part is already mentioned above (calculating the invoice total).
Creating the PDF
We've set up our section in Craft that will contain our invoices. We created a basic template that will render our invoice. Now we need to generate a PDF. There are several ways to accomplish this. For example, although I haven't tested it yet, Enupal Snapshot looks like a solid option. But for my own workflow, I wanted something free and more nerdy. I went with the amazing URL to PDF Microservice package. It is as easy as cloning the repo and running npm start. It tells you where the Express Server is listening on. It will run by default on localhost:9000. So in my case the URL that will generate the PDF is: http://localhost:9000/api/render?url=http://your-local-domain.localhost/invoices/{ID}.
As stated in the documentation it's not recommended to run this API on a public domain. So it's best to keep this setup running on your local machine.
What's next
With the exception of the PDF generation package, we have successfully set up a workflow to manage and create custom invoices without relying on third party tools or apps 🎉 If you are a little familiar with Craft, it's extremely easy to start tweaking this workflow to your needs.
Want to email your client as soon as you publish your new invoice? That could easily be done with Enupal Snapshot and one of the many notifications plugins.
Perhaps you'd like your client to be able to pay their bills online. You could deploy your Craft app and share the invoice URL with your client (⚠️ remember to not run the URL to PDF server public though). Add an online visible only button to start accepting payments.
If you have more ideas to improve this workflow, I would love to hear them!