How to create a local web server with Sketch2React
Confess you just jumped up and down in excitement reading above headline ??
Anyway.
Howdy dowdy folks, here’s a very handy tutorial on how to create a local, auto-updating web server when working with Sketch2React exported code. Of course this works with any code but yeah, it’s specially useful for designers just starting out, learning more about code using our design to code framework.
Also this is specially useful when using our HTML export option since the React export comes with a built-in one.
Step 1 — Install Node.js
Make sure you first have Node.js installed on your computer machine…
Step 2 — Export to HTML from Sketch2React
Export to HTML from our code app. If you have several pages you first need to visit them once for them to be added to our export bundle.
Step 3 — Drag your project folder onto VSC
Drag your entire export folder (after you have unzipped it) onto Visual Studio Code (it’s free and amazing so we use it ??like aaaaall the tiiiiiime).
Step 4 — Create a new file
Create a new file in VSC (right-click →New File) and make sure you’re inside your project folder, it needs to be there for this to work.
Name the file package.json
Step 5 — Copy this code
Copy+paste the code from this package.json file and save…
Step 6 — Time to install the web server
- In Visual Studio Code go to Terminal
- Choose New Terminal
- Write npm install and hit enter
- Sit there in amazement and scream out loud (or in your head) — I’m a fracking developer !!
Things get installed directly onto your folder. When something that resembles an 2-bit animation has done its thang do this:
Step 7 — Start your server
If you think you felt like a pro dev in step 6 just wait and see how sexy you will feel after this step.
- Write npm start
- Hit enter
- Drink coffee always more coffee
- If the Gods and Gifs are on your side your default browser will open up fairly quick, and your beautiful design will reveal itself, with the super clean code that Sketch2React outputs. Yes we know you love us.
- Now all edits that you do directly in code will automatically update the browser ??♂️
Don’t like to read?
Here’s a video version (kinda) of the same process ??
That’s all folks and if you scrolled aaaaaaall the way down here you either are a hero or you suffer from severe scrolling addiction. Either way, amazeballs!