{"id":72,"date":"2019-05-22T20:07:45","date_gmt":"2019-05-22T18:07:45","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/05\/22\/how-to-create-a-local-web-server-with-sketch2react\/"},"modified":"2020-10-22T14:22:13","modified_gmt":"2020-10-22T12:22:13","slug":"how-to-create-a-local-web-server-with-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-create-a-local-web-server-with-sketch2react\/","title":{"rendered":"How to create a local web server with Sketch2React"},"content":{"rendered":"
\n

<\/p>\n<\/figure>\n

\n
\n
\n
\n

How to create a local web server with Sketch2React<\/h3>\n

Confess you just jumped up and down in excitement reading above headline ??<\/p><\/blockquote>\n

Anyway.<\/p>\n

Howdy dowdy folks, here\u2019s 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<\/em> code but yeah, it\u2019s specially useful for designers just starting out, learning more about code using our design to code framework.<\/p>\n

Also this is specially useful when using our HTML export option<\/strong> since the React export comes with a built-in one.<\/p>\n

Step 1\u200a\u2014\u200aInstall Node.js<\/h3>\n

Make sure you first have Node.js<\/a> installed on your computer machine\u2026<\/p>\n

Step 2\u200a\u2014\u200aExport to HTML from Sketch2React<\/h3>\n

Export to HTML from our code app.<\/strong> If you have several pages you first need to visit them once for them to be added to our export bundle.<\/p>\n

Step 3\u200a\u2014\u200aDrag your project folder onto VSC<\/h3>\n

Drag your entire export folder<\/strong> (after you have unzipped it) onto Visual Studio Code<\/a> (it\u2019s free and amazing so we use it ?\u200d?like aaaaall the tiiiiiime).<\/p>\n

Step 4\u200a\u2014\u200aCreate a new file<\/h3>\n

Create a new file in VSC<\/strong> (right-click \u2192New File) and make sure you\u2019re inside your project folder, it needs to be there for this to work.<\/p>\n

Name the file package.json<\/strong><\/p>\n

Step 5\u200a\u2014\u200aCopy this code<\/h3>\n

Copy+paste the code from this package.json<\/a> file and save\u2026<\/p>\n

Step 6\u200a\u2014\u200aTime to install the web server<\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
    \n
  1. In Visual Studio Code go to Terminal<\/strong><\/li>\n
  2. Choose New Terminal<\/strong><\/li>\n
  3. Write npm install<\/strong> and hit enter<\/li>\n
  4. Sit there in amazement and scream out loud (or in your head)\u200a\u2014\u200aI\u2019m a fracking developer !!<\/em><\/li>\n<\/ol>\n

    Things get installed directly onto your folder. When something that resembles an 2-bit animation has done its thang do this:<\/p>\n

    Step 7\u200a\u2014\u200aStart your server<\/h3>\n

    If you think you felt like a pro dev in step 6 just wait and see how sexy you will feel after this step.<\/p>\n

      \n
    1. Write npm start<\/strong><\/li>\n
    2. Hit enter<\/li>\n
    3. Drink coffee always more coffee<\/li>\n
    4. 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.<\/em><\/li>\n
    5. Now all edits that you do directly in code will automatically update the browser ??\u200d\u2642\ufe0f<\/li>\n<\/ol>\n

      Don\u2019t like to read?<\/h3>\n

      Here\u2019s a video version (kinda) of the same process ??<\/p>\n