Exporting to Code π
All you need to know about Sketch2React's different ways of exporting to code.
Export to Capacitor.js
You now also can export directly to iOS & Android project via something awesome called Capacitor.js
Make sure you have all links between pages working and that you have visited each page once (it gets added to our export bundle that way)
Click on the Download button π Download Capacitor project
Unzip the folder we created for you
Make sure you compress the images, we 𧑠TinyPNG
Drag the entire folder onto e.g., Visual Studio Code
Open up a New Terminal in VSC
Type
npm install
and hit enterDone!
Download the latest package.json file
When you export to Capacitor from Sketch2React you get a neat package.json file that holds important stuff like which version of Capacitor to install etc. Problem with that is that since we don't update our apps as often as Capacitor does you may run into errors while installing.
Simple solution? We just make sure we update this fileπ π€ more often than Sketch2React. Easy peasy. After you have exported to Capacitor, just replace the autogenerated one with this one and you'll be fine as π·
Install Xcode Command Line Tools & CocoaPods
This is crucial to do before you go to the next step of installing either the iOS or Android platforms.
Download and install the Xcode Command Line tools. You can do this directly from within Xcode or you can just fire up the mighty Terminal app and add this installation snippet:
Download and install CocoaPods, easiest is just by adding this snippet directly in the Terminal:
How to install for iOS
Drag the entire exported folder onto your preferred code editor, we always use Visual Studio Code since itβs really nice (and free π¬)
In VSC π Terminal π New Terminal
Just type
npm install
You have now installed Capacitor.js onto your project folder π Yes! πͺ Not ready yet though, a couple of easy steps left, carry on soldier
Type
npx cap init
and hit enter key. Capacitor will ask you a bunch of stuff, like what you want to call the app, where the www folder is etc. Do what is forced upon you and just be a happy camper ποΈNow itβs time to do the real magic, installing all the files Xcode needs to automagically convert this to a .xcode project
Type
npm install @capacitor/ios
and hit enterOne would assume you would be ready by now. You are assuming wrong dear Watson
Type
npx cap add ios
and hit enter key
Now comes the best command ever, hold on to your shorts or skirts π
Type
npx cap open ios
and like magic mushrooms Xcode will open up in the background and also open up the very same project you just created π Huzzah!
How to install for Android
Just follow these instructions.
Updating the HTML
Say that you have exported from Sketch2React and later add new things/change stuff. Of course you want them updated inside Capacitor also. The easiest workflow is:
Update inside Sketch/Lunacy
Make sure you see those changes inside Sketch2React
Export as HTML
Copy the entire HTML export and overwrite inside the www folder in your Capacitor project
Jump back to your code editor (we use VSC) open up a new Terminal and run the following command. Make a happy π―ββοΈ
How to export to React
Follow these instructions to the point and youβll be exporting to React code and components in super little time. We promise π
Adding things to export
Open up Sketch2React app.
Go to File, Link Sketch-file (βL) or just drag and drop the Sketch file
Your Sketch file needs to have our markup rules (components etc)
Before anything can be exported to code, you need to add each artboard/page to our export bundle. You do that by visiting each page in your design, it adds itself automagically to our bundle after each page load. Neat right?
Press Download icon
Press React and save the .zip somewhere locally on your computer.
Known issues
Donβt save to Dropbox, OneDrive or Google Drive. Or use at your own risk of being really annoyed π
Once you begin installing all the packages that are included in our React export, these services will most likely hickup. Or send you automated emails complaining you have to many files πΈ
This is because we use Create React App (among other things) and it contains an amazingly amount of really small files. Size-wise weβre talking about approx 220MB of downloaded packages.
iCloud seems to be working fine with these many small files, no crash so far and the syncing seems to be working great between computers linked to the same Apple ID.
ποΈ Cool, now letβs move on to the really exciting partβ¦
Now comes a couple of steps that first can seem very odd and very unfamiliar. Specially if you have never installed thingies via the Terminal. We have streamlined this as much as we can but hey, this is a real design to code environment, you canβt cheat your way through this πΈ
ποΈ Node.js
For our React export to work you first need to install Node.js.
Node.js is an open source server environment
Node.js is free
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
Node.js uses JavaScript on the server
Download the latest build from here
How to export to React (Terminal)
First of all, make sure you have admin rights to your computer or nothing of the below things will ever work.
Open Terminal app. You know that weird little app you maybe have been in contact with when doing funky stuff to your Mac π Itβs actually really friendly, donβt be afraid. But weird yes.
Write cd and do a blank space
Go to your dl Sketch2React .zip, unzip and drag drop the entire folder onto your Terminal window. Drop it precisely after the words cd + your blank space. It should look something like this cd /users/
Hit Enter β©οΈ
How to install all required packages (Terminal)
Write npm install and hit enter β©οΈ
Since you have entered the correct cd installation of all required packages should begin
How to start your development server (Terminal)
Write npm start and hit enter β©οΈ
It will take up to one minute and then you will see this message in the Terminal will open up your default browser with localhost:3000
Done! Now continue with your development outside of Sketch, do all changes directly in code.
How to create a build (Terminal)
If the server is running, press Control+C to stop it
You canβt create a build while the server is running!
Write npm run build and hit enter β©οΈ
It will create a optimized build of your entire project. It takes a bit of time, just chill, stand up, look out your window or something π
Building for Relative Paths
By default, Create React App produces a build assuming your app is hosted at the server root.
Hereβs how you change that.
Open up package.json and enter this very path below version:
Export to HTML
First of all, make sure you visit each and every page within our code app that you want to be included in your Export Bundle. Wait for the Your Artboard was added to the export bundle message to appear, it will take a few seconds per artboard, we're just making sure all the good stuff gets included πΊ
Go to the Side Bar in our app and click Download
Save to great place
You know have a .zip file with all of your files, assets neatly organized in separate folders
Last updated