DEV Community

Cover image for Share your website with others without hosting it on cloud!!!
Ishan Mishra
Ishan Mishra

Posted on

Share your website with others without hosting it on cloud!!!

1. Overview

The method discussed in this article is not an alternative to hosting sites on cloud, its just a temporary way of sharing the website while it is under development phase.

2. Setup

We are going to use localtunnel to expose our localhost to the internet.

  • Step-1: Download and Install npm from here. Note: Node installer includes npm.
  • Step-2: Install localtunnel using following command
npm install -g localtunnel
Enter fullscreen mode Exit fullscreen mode

Note: You may need to add 'sudo' before npm in linux/mac systems.

This will install localtunnel globally. Read more about localtunnel here.

3. Expose localhost

For demo I am going to use a react based website, and run it on port 3001.

Screenshot_20210424_122806

Now the site is running on localhost, next step is to expose this localhost's port to internet, to do this we will run the following command on terminal

npx localtunnel -p 3001
Enter fullscreen mode Exit fullscreen mode

Replace '3001' with the port number your site running on

This command will generate a link, this link can be visited in any device in any location and will redirect to the localhost's port on our localsystem.
Note: We need to keep serving the website on our localsystem's port.

Screenshot_20210424_124023

4. Conclusion

Clearly this method is not an alternative to hosting the site on cloud, but can be very helpful for sharing websites/webapps, while they are under development. While setting up OAuth using facebook it requires redirect url with 'https' so localtunnel can be helpfull in this scenario too.


[1]: localtunnel


Top comments (2)

Collapse
 
victorrims68524 profile image
Rimsha Victor Gill

Great tutorial! Thank you for sharing this clever workaround to temporarily share localhost websites without live hosting. Localtunnel is an easy-to-use tool that makes local web development and collaboration much simpler. Appreciate the clear, concise instructions on getting it set up. Very helpful for developers!

Collapse
 
luccin243 profile image
Luccin Masirika

Intersting 🤔