From time to time, something pops up that makes us go ”Hmm wait a minute, this is fascinating, will this work”… Today that happened again.
Just browsing through newly added Setapp apps (a service we can’t live without nowadays) we stumbled into Wunderbucket.
Tutorial requirements
- Marcode app
- Wunderbucket app (use the free plan)
- Icons8 Lunacy or Sketch
- Setapp subscription (optional)
- You can use this .sketch file for Lunacy and this one for Sketch
Why two different .sketch files?
Sometimes in our tests using both Icons8 Lunacy and Sketch together with Marcode I have noticed that when I go from Sketch to Icons8 Lunacy and then back to Sketch again, certain visual bugs appears. Nothing that shows inside our app, but still, the designer in my finds this very annoying.
So to keep this tutorial neat and nice (yes we say that ALOT) lets just go with this workflow.
How to export correctly
Turns out, Wunderbucket works really excellent with any HTML structure, basically you turn your locally exported folder into a local host automatically. No need to use Visual Studio Code or any other editor, it really is simple. Awesome stuff and well done team Wunderbucket!
In Marcode
- First, make sure you have visited all the artboards inside Marcode that you want to include in our HTML bundle export
- Go to Download and choose Download HTML
- Go to the location on your HD where you saved our export, unzip the folder
In Wunderbucket
Wunderbucket adds itself to the macOS menu bar, make sure you have it installed and opened.
- Press New Site
- Give your site a silly name
- Under Local folder, browse to your unzipped Marcode exported HTML folder
- Leave Pick a template as it is (Blank) and press Create site
- Done!
You now have two options. Either you press on the link called local host (which I didn’t do in the video below, which got me perplexed) or you wait until Wunderbucket realizes that you have something to upload.
So basically
- Local host is the locally setup HTML server provided by Wunderbucket, the place you probably will want to look at first to make sure everything looks spectacular
- Once you have uploaded your site, press the link containing the name that you gave it, and you’ll see your live site
- Easy-peasy done!