'%20width='128'%20height='128'%20xlink:href='data:image/jpeg%3bbase64%2c/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCABAAEADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAABQIDBAYHAAH/xAAzEAACAQMCBAMHAgcBAAAAAAABAgMABBEFEgYhMUETUWEHFCNCYnGBFSIyM1KRobHB8P/EABsBAAEFAQEAAAAAAAAAAAAAAAQAAQMFBgIH/8QAJhEAAQQBBAEDBQAAAAAAAAAAAQACAxEEBRIhQTFCUYEGMmHB4f/aAAwDAQACEQMRAD8AxeKN5ZFjiUs7HAUdSau2h6DDZqstyFluevPmqfb19ai8J6eIoPfJV%2bJJyTPyr5/mrGDV9HHxZUGRuIoJ4Gg1xr4guJYjblijFch%2btStXuHttKu5ov5kcTMvocUU4P9kbX2jWd/d626C6iWcxRwBtu4Z6k9edC5uYzFALzVoPH085DiALpCrLXbO4kSN2MMrnCq/QnyBouDSOLvY%2bLLRr7ULXW5ZTaxNN4UsAG4KM4yDyP4ofw7cyXWiWU8xJkeIFie/bP%2bKbEzGZQOw3SrdU0s4tEirUTXuHIL9WmtAsN115clf7%2bR9aoM0TwyvFKhSRDhlPUGtcBqs8a6UJ7b3%2bFfixDEmPmXz/AB/qiHt7CbS9QdG8QSmwfB9v4icYVEVVGFUYA8hTgNNA0oGi6WtmhU2w0ldenOlvMYBcoyCQLuwceVbHBBd213BBBKgsUiH7PAAVVH7dqsDkNyB5gjFYvZ3lxYzrc2TKtygJjLDIBwQOVa9peqXGuaRp19pD2SxTqDNJclxsI5OqgDmc7hknHLvWV%2boI5DIx3pIr5U2nhrQ4d/pP6lDeTzyRNIvuLxklBAGUgYyrsTnJycADoDmsg/Tl0c/p0cniLbfDDYx69PzitQ4m1m60DR9Rur17KRcGOyaAsS0rZCIwIxnPcHHLoKy%2baaSeVpZ2DyucuwGAT54paDFIHPcftqvlAa9scxrPVd/CUDXOqyRsjgMjAqQe4NIBpQNaQhYyWKkLBpQNDLLUUl0sXTEZVcOPqHb/AN50Cub6e4J8WQ7f6RyFdyTNYB%2bV6NlSsYAfNq0yahbo4QSB5D8q86MjhviuPhw3nB2qubLVIj7zZs4Xw3Jw5jJ/h5g9MHn3rPLa4WDc%2bNz4wo7fetM9mXtAtdMhXStY%2bFbs5ZJ%2boQnqG%2bnPftVJqT5pIw6MXXXlAQPa%2bSpOAfZNDh/iR9IbVeM9UaRdMg22lmrBlD42q7kci3P1PrQiDUraR/DMgSQcircv7Ub9pnH9pqULaVowElsrhpJ8YWRh0A%2bnPfvWZ3Nws%2b18bXxhh2%2b9NprpWRl0gq%2bvFBQ5rI3v2s5rtX8Glg1QrTUrm0I8KVto%2bRuYNWi/1SODRjeIRl1%2bGPqPb8f8q3bIHBU02IbAHaoVvK6xugYhGIJXsSKXvqMpwK93c6FPKvHC1I3V2%2bmN1dupUudqf315upjdXu6lSW1P76TczyPDFEzkxoSVXsCetM7udcxyKQ4ThtFf/9k='%20/%3e%3c/svg%3e)
At this point in time, the code for Mattrbld is not yet available to the public. This article is for future reference, but you can already self-host the CORS-Proxy-Server, which will be explained in the next article.
At its core, Mattrbld is just a single-page-application that interfaces with Git through its API. As such, self-hosting Mattrbld is much easier than you might expect, since all the code runs right in the browser. In fact, since it is so simple and lightweight, it can be hosted even on free hosting services such as Netlify, Surge, or Vercel.
In this article, you’ll learn how to set up and customise your own instance of Mattbrld and host it.
Prerequisites
To self-host Mattrbld, you’ll need the following:
Some familiarity with the Terminal,
git,npmandnodeA code editor, such as VS Code
A copy of the Mattrbld source code that you can either clone with
git cloneor download as a*.zipfile from the project repository (currently not available)
Installing Dependencies
Mattrbld is a Vue.js app and manages its dependencies through npm. So, after obtaining a copy of the source code, you can install the dependencies of the project with npm install. You might see an error about peer dependencies, in that case try using npm install --legacy-peer-deps.
To check if everything worked correctly, run npm run dev to start a development version of Mattrbld on port 8080 and a local CORS-Proxy on port 9999. You can verify that everything works as intended by visiting http://localhost:8080 in a browser and going through the onboarding process.
Customising Your Instance
If everything works at this point, you technically could just run npm run build to get a compiled version that you can upload to a server. However, Mattrbld offers some ways you can customise your specific build of the software.
Imprint and Privacy Policy
You can add an imprint (sometimes also called “legal notice”) and a privacy policy to your instance of Mattrbld by adding an IMPRINT.md and a PRIVACY.md file to the root folder of the project. The contents of these files will be rendered in a modal window on the Onboarding screen when the corresponding link is clicked in the footer.
'%20width='1451'%20height='939'%20xlink:href='data:image/jpeg%3bbase64%2c/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAApAEADASIAAhEBAxEB/8QAHAAAAQQDAQAAAAAAAAAAAAAABgAEBQcBAgMI/8QAORAAAQIEAgcDCAsAAAAAAAAAAQIDAAQFEQYhBxITIjFRkTJBcRYjM0KBkqHRFCU0Q1RVYXKT0vD/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAwEC/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAECERL/2gAMAwEAAhEDEQA/ABpnX2vq7O3tvEi1wjgiVUk9oWhyhISLCL6sonKZhauVSTTNU%2bmvvy6yQlxOqAbGx4nnDhWB8ThVhRJojndH9otrRfNfR8B0sZbxe4i/3iv1gmfm23kaj7bTiQb2U3cX6xP0KG8h8S/k8z1T84b1DCldp8m5NTtMfZl2xdbitWyR7DHoKVm2JcKCWUoCjchpsJz5nOIPSVOJcwBWlMoWVJaRu2FyCtPDOOR59hRzbcUtRCmXG7d6rZ9DHSAbuqKUixtnHLaLtx%2bEOIUUF7aL1N%2bQ1HL4SQS9dWsQR51XAAWPwgsJpxIO/c8O1n/rQJ6N0OrwLStmylwXevdJNvOnkRBolxBABkXeXo0/OJ0apdkFEJS2CTlbZm5iE0jJaGAa1qNhILOY1besIIrN/hD7ggZ0huMLwRW0NJQlYZzA1b9ocjAeeCG7ndHSNk2tuiwjCwAeB9gjKOGQtGhmZkJVvcIcREv98So7I8IrqcBnh/SVUcNUVinS8hKPstlRStxSgc1E2NvGHitN1WHCk0/%2bRcVzPfZleIiMa9O3%2b4R1jGbO0XUNL1VIH1ZI%2b%2buBidxM0%2bzUhL0WSlH6gkoffQ64pRClhZsCbZkQOQojnesyzN5KFrDmOsK45jrGkZHdGD//2Q=='%20/%3e%3c/svg%3e)
If you don’t provide these two files, the links won’t be shown in the footer, although you should definitely consider at least adding a privacy policy if your instance is intended for anything other than personal use.
Analytics Options
Mattrbld supports sending basic analytics information to the self-hostable Umami analytics software. To enable this, add an .env.production.local file to the root directory of the project containing the following information:
VUE_APP_UMAMI_SCRIPT=<URL of your Umami script>
VUE_APP_UMAMI_ID=<ID of your instance in Umami>The variable VUE_APP_UMAMI_SCRIPT_URL needs to be set to the full URL of the Umami script on your Umami instance, something along the lines of https://analytics.example.com/umami.js.
The variable VUE_APP_UMAMI_ID on the other hand needs to be set to the ID that Umami gave you when you added the domain of your Mattrbld instance as a site to Umami.
If these environment variables aren’t present when npm run build is run, Mattrbld will not report any analytics. If they are present, it will track the following page views and events:
Page view on
/Page view on
/onboardingPage view on
/importEvent
importwith data on whether the import was done from the home, onboarding, or import routes
Custom Default CORS Proxy
By default, Mattrbld assumes that there is a CORS Proxy running under /corsprox on the hosting environment. If your CORS Proxy is running under a different URL, you can change this default value by changing line 154 in /src/views/Onboarding.vue, which specifies the corsProxy variable which is then used and set as default for future imports during the Onboarding process.
Deployment and Hosting
Once you have everything configured as you like, run npm run build to create a compiled version of Mattrbld in the /dist folder that you can copy to your hosting provider of choice. Any web server that can serve static files will do, and services like Vercel and Netlify even offer great free plans.
Mattrbld has to be served from the root of your domain. It will not work on sub-paths, so if you’re deploying a custom instance for a client, it’s best to have it run under a subdomain.
https://mattrbld.example.com will work, https://example.com/mattrbld/ will not!
If you absolutely need to run Mattrbld on a path other than the domain root, check out how to customise the publicPath of a Vue project.
Once the contents of the /dist folder are transferred to your file hosting service of choice, you should also add a redirect from any route to index.html, since Mattrbld is a single page app that uses client-side routing. You can learn more about deploying a Vue app on different platforms here.
Then simply visit the domain connected to your webspace and enjoy your own instance of Mattrbld!
Closing Thoughts
As you learned in this article, self-hosting Mattrbld is not different from deploying any other static site and while it will provide you with greater control and the ability to customise it, there generally shouldn’t be a need for that as long as the official instance is available.
Self-hosting the CORS Proxy that is unfortunately still necessary to interface with most Git providers, however, is much more important to not put too much strain on the official infrastructure, especially for larger projects with more frequent changes. You will learn how to do so in the next article of this section.