{"componentChunkName":"component---src-templates-blog-js","path":"/blog/ngrok-basics-quick-start","result":{"data":{"contentfulBlogPost":{"title":"ngrok Quick Start and Basics","publishedDate":"December 24th, 2020","body":{"json":{"nodeType":"document","data":{},"content":[{"nodeType":"heading-1","content":[{"nodeType":"text","value":"What is ngrok","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"ngrok is a tool that enables developers to expose their local development environment to Internet with as little effort as possible. ngrok works cross platform and it publishes your wish of choice at a subdomain of ngrok.com.","marks":[],"data":{}}],"data":{}},{"nodeType":"heading-5","content":[{"nodeType":"text","value":"Hands on Experience:","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"To be able to use ngrok we first should go ahead and download the ngrok from it's website.","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Here is a link for the website: ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"ngrok","marks":[],"data":{}}],"data":{"uri":"https://ngrok.com/"}},{"nodeType":"text","value":"","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"On the main page above we can find the download section.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c2TQisnEAc1ZIVnkGMlS4iO","type":"Asset","createdAt":"2020-12-24T21:08:19.906Z","updatedAt":"2020-12-24T21:08:19.906Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"2TQisnEAc1ZIVnkGMlS4iO"},"fields":{"title":{"en-US":"ngrok-toolbar"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/2TQisnEAc1ZIVnkGMlS4iO/4f2c5ef8bf799655f3ad2fb7a0964200/websitetoolbar.png","details":{"size":22729,"image":{"width":1284,"height":144}},"fileName":"websitetoolbar.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"On download section you can find the compatible link for your system. It will contain an executable, we'll later learn how to use it.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c6gzvnYCK1D0zZtiPk2miLG","type":"Asset","createdAt":"2020-12-24T21:10:27.854Z","updatedAt":"2020-12-24T21:10:27.854Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"6gzvnYCK1D0zZtiPk2miLG"},"fields":{"title":{"en-US":"ngrok-dowload"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/6gzvnYCK1D0zZtiPk2miLG/1bd4bc7bbfd997ce332f5d92335a83b0/downloadngrok.png","details":{"size":80482,"image":{"width":1382,"height":544}},"fileName":"downloadngrok.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"For the purposes of this tutorial we'll use VS Code. On extensions section \"live server\" extension can be found. ","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c3sZ8v9dzCVgjujMBjFEhXw","type":"Asset","createdAt":"2020-12-24T21:13:20.533Z","updatedAt":"2020-12-24T21:13:20.533Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"3sZ8v9dzCVgjujMBjFEhXw"},"fields":{"title":{"en-US":"liveserver-extension"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/3sZ8v9dzCVgjujMBjFEhXw/956632278228ec7468a2e90b4df4791b/liveserverpackage.png","details":{"size":81692,"image":{"width":1366,"height":328}},"fileName":"liveserverpackage.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Now we can go ahead and create our basic html page to publish later.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c1mo3sFZuTEf42oId1GUpFv","type":"Asset","createdAt":"2020-12-24T21:16:31.929Z","updatedAt":"2020-12-24T21:16:31.929Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"1mo3sFZuTEf42oId1GUpFv"},"fields":{"title":{"en-US":"website-basic"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/1mo3sFZuTEf42oId1GUpFv/96156e99bb5a87f68476c9d464d5dd7f/websitebasic.png","details":{"size":73341,"image":{"width":1258,"height":494}},"fileName":"websitebasic.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"On the right bottom we can activate the local server by clicking the \"Go Live\" button.","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c3AkUUITC2lpwxT8vT6xtOk","type":"Asset","createdAt":"2020-12-24T21:19:33.405Z","updatedAt":"2020-12-24T21:19:33.405Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"3AkUUITC2lpwxT8vT6xtOk"},"fields":{"title":{"en-US":"goliveserver"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/3AkUUITC2lpwxT8vT6xtOk/52a63792ab6161a36106f11160c71c20/golivelocal.png","details":{"size":15725,"image":{"width":850,"height":168}},"fileName":"golivelocal.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Now our page is live locally.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c3jr9V5n4QM6JaEDfrXMcXe","type":"Asset","createdAt":"2020-12-24T21:22:43.922Z","updatedAt":"2020-12-24T21:22:43.922Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"3jr9V5n4QM6JaEDfrXMcXe"},"fields":{"title":{"en-US":"local-server"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/3jr9V5n4QM6JaEDfrXMcXe/77e3f71d47cee7cd0c6775d6eef98318/local-server.png","details":{"size":29712,"image":{"width":1422,"height":406}},"fileName":"local-server.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Now that we publish our webserver on port 5500, we can go ahead and unzip ngrok file. With \"./ngrok http 5500\" command we can create our tunnel finally.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c1JoOsJYjZAqRfz3bjiSfNl","type":"Asset","createdAt":"2020-12-24T21:25:17.520Z","updatedAt":"2020-12-24T21:25:17.520Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"1JoOsJYjZAqRfz3bjiSfNl"},"fields":{"title":{"en-US":"ngroklive"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/1JoOsJYjZAqRfz3bjiSfNl/889d12b80f18974e99e653e921097487/startngrok.png","details":{"size":62645,"image":{"width":1096,"height":384}},"fileName":"startngrok.png","contentType":"image/png"}}}}}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c4jY8WUF86CJU2zxm9dHFjj","type":"Asset","createdAt":"2020-12-24T21:25:53.954Z","updatedAt":"2020-12-24T21:25:53.954Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"4jY8WUF86CJU2zxm9dHFjj"},"fields":{"title":{"en-US":"ngrok-online"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/4jY8WUF86CJU2zxm9dHFjj/b9fd1236a7ac4d2bd6af11d65ecd6155/published.png","details":{"size":36595,"image":{"width":1354,"height":562}},"fileName":"published.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"All right our local page is finally online, yet to clarify ngrok is awesome but only for development purposes, it's not a tool to use for production.","marks":[],"data":{}}],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"Thank you very much for following along with me, I hope to see you on the new ones. :) ","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"","marks":[],"data":{}}],"data":{}}]}}}},"pageContext":{"slug":"ngrok-basics-quick-start"}}}