Making a Local Dev Server accessible via Public Domain using Cloudflare Tunnel

Hi all,

Today, we are going to discuss how you can publicly access the local running server with a domain and Cloudflare tunnel.

Pre-requisites

1. Domain
2. DNS on Cloudflare
3. Cloudflare One account access
4. Local server

Set up the environment

Application

Make sure your application runs locally on a port like 8000,9000 etc.

Cloudflare Tunnel

1. Log in to your Cloudflare One account.
2. Go to "Zero Trust".
3. Expand Networks and select Connectors.
4. Click on “Create a tunnel”.
5. Select “Cloudflared”.
6. Give a name to your tunnel.
7. Click on “Save”.
8. In the "Choose your environment" section, select the environment where the server is running.
9. Follow the instructions to install and run a connector.
10. Here, you need to move to your server machine.
11. Open the terminal and perform the instructions to install the "cloudflared" tool.
12. Run using the token (part of the command).
13. Once the installation is completed. Click on Save.

Add IP/CIDR

1. Edit the tunnel to add the IP/CIDR.
2. Choose based on your local DHCP.

Published application routes

1. Click on “Add a published application route”.
2. Give an optional subdomain.
3. Select the domain from the dropdown.
1. You need to have your domain managed by Cloudflare (DNS).
4. An optional path to make sure you have a frontend and a backend that work together.
5. Under service, select Type as HTTP, and your local machine server port.
6. Select the URL of the server application, including the localport.
1. localhost:9000
7. Click on “Save”.

Note: If you have a frontend and a backend, then you need to add one more application route.

In my scenario, the frontend path is * with localhost:9001, and the backend path is api/* with localhost:8000.

Run the tunnel

1. Make sure your local web server is running
2. Log in to cloudflared

• cloudflared tunnel login

• Authorize the tunnel on the web browser post login
3. List the tunnels

• cloudflared tunnel list

4. Get the tunnel token from the tunnel you created in Cloudflare connectors
5. Run the command on the local terminal

• cloudflared tunnel run --token eyJhIjoiM2...

6. Now, you should be able to browse your configured subdomain with your local web server content. 

Troubleshooted issue

If the frontend with path "/*" is above the backend route, then your backend APIs will never be reached.

So, "move up" the backend with "/api/*" path above the frontend to serve the requests.

Feel free to reach out to me if you have any doubts and clarifications needed at my email psrdotcom@gmail.com

Publish and Consume NPM Packages using GitHub Package Manager

 Hi folks,

We are used to publishing the npm packages on npmjs.com. Today, I will show how we can publish the npm packages to GitHub and the steps to use those packages.

1. Publishing Packages

Prerequisites

We need to have an account with GitHub

JavaScript native/framework based project with package.json

Add the .npmrc file to your project with the following syntax. Change the OWNER value to your GitHub account or organization name.

@OWNER:registry=https://npm.pkg.github.com

Publishing Process to GitHub

Create personal access token using the following steps

• Login to GitHub
• Go to Settings
• Navigate to "Developer Settings" -> "personal access tokens"
• Generate token with write:packages access permissions

• Open terminal in the project folder
• Execute the command to login

npm login --scope=@OWNER --registry=https://npm.pkg.github.com

• When prompted,
• Username: GitHub username
• Password: Personal access token
• Public e-mail: Your email address
• Enter the following command to publish the package

npm publish

2. Consume/Installing the packages

Prerequisites

We need to have an account with GitHub

Installation

Add the .npmrc file to your project with the following syntax. Change the OWNER value to your GitHub author or organization name.

@OWNER:registry=https://npm.pkg.github.com

Enter the full name @OWNER/package-name-version in dependencies in package.json

Install the dependencies

npm install

Note: If the organization is asking for authorization of personal access token, then you need to authorize from the personal access token section against the token for the respective organization.

Hope you will make use of GitHub for publishing the packages and consuming them with ease.

Request you to send your feedback and comments to psrdotcom@gmail.com

Shelr.tv, Record your Terminal / Console and Share Online

Hi friends,

If you want to share your terminal work with your friends/official/public.

About Shelr.tv: http://shelr.tv/about

I have uploaded a sample terminal work of mine. Just listing .txt file(s)



Click on the Play button to view the recorded work.

We can create and share online tutorials and lot more by using this. If you are interested to do so, please follow the below procedure to install and record using shelr.tv

Pre-Requisites:

1. Any Linux OS, Mac OS X
2. Ruby and Rubygems

Your Identity:

• Register with Shelr.tv to create an account with your any one of the existing ID (GitHub, Twitter, Google, OpenID)
• You will be getting your unique ID from Shelr.tv
• Now you are ready to record your terminal work

Installation:

I have tried with Ubuntu 11.10.

Please see the installation process here.

As you can see the bold faced lines are the commands which has been executed.

user@user-Vostro-230:~$ sudo add-apt-repository ppa:gwibber-daily/ppa

You are about to add the following PPA to your system:

 PPA for gwibber-daily

 Daily builds of Gwibber trunk

 More info: https://launchpad.net/~gwibber-daily/+archive/ppa

Press [ENTER] to continue or ctrl-c to cancel adding it

Executing: gpg --ignore-time-conflict --no-options --no-default-keyring --secret-keyring /tmp/tmp.aTSMFL4Xlg --trustdb-name /etc/apt/trustdb.gpg --keyring /etc/apt/trusted.gpg --primary-keyring /etc/apt/trusted.gpg --keyserver hkp://keyserver.ubuntu.com:80/ --recv 06D1ED00EB802A66640696C8D0AFF96872D340A3

gpg: requesting key 72D340A3 from hkp server keyserver.ubuntu.com

gpg: key 72D340A3: public key "Launchpad PPA for gwibber-daily" imported

gpg: Total number processed: 1

gpg:               imported: 1  (RSA: 1)

user@user-Vostro-230:~$ sudo apt-get update

Reading package lists... Done

W: GPG error: http://ppa.launchpad.net oneiric Release: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 588CD9FC28446D73

user@user-Vostro-230:~$ sudo gem install shelr

Fetching: json-1.6.6.gem (100%)

Building native extensions.  This could take a while...

Fetching: shelr-0.15.1.gem (100%)

Successfully installed json-1.6.6

Successfully installed shelr-0.15.1

2 gems installed

Installing ri documentation for json-1.6.6...

Installing ri documentation for shelr-0.15.1...

Installing RDoc documentation for json-1.6.6...

Installing RDoc documentation for shelr-0.15.1...

Record:

1. Setup the Shelr with your unique id
2. Run the record command
3. Play the recorded work
4. Push the recorded work
• You will be prompted with "Description" and "Tags" of the work
• Once successfully published the work, you will get the link (URL) of published one

Please see the sample recording and publishing of work.

user@user-Vostro-230:~$ shelr setup 8333xxxxxxxxxxxxxxxxxx

user@user-Vostro-230:~$ shelr record

Provide some title for your record: PSR's First Shelr Record

/home/user/.local/share/shelr/1335339141/meta

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

=> Your session started

=> Please, do not resize your terminal while recording

=> Press Ctrl+D or 'exit' to finish recording

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Script started, file is /home/user/.local/share/shelr/1335339141/typescript

user@user-Vostro-230:~$ ls -l *.txt

-rwxr-xr-x 1 user user 64 2011-05-12 15:52 mozilla.txt

user@user-Vostro-230:~$ exit

Script done, file is /home/user/.local/share/shelr/1335339141/typescript

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

=> Session finished

Replay  : shelr play last

Publish : shelr push last

user@user-Vostro-230:~$ shelr play last

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

user@user-Vostro-230:~$ ls -l *.txt

-rwxr-xr-x 1 user user 64 2011-05-12 15:52 mozilla.txt

user@user-Vostro-230:~$ exit

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

user@user-Vostro-230:~$ shelr push last

Your record will be published under terms of

Creative Commons Attribution-ShareAlike 3.0 Unported

See http://creativecommons.org/licenses/by-sa/3.0/ for details.

Description: PSR's First Recording using Shelr.tv

Tags (ex: howto, linux): Test, Shelr, Ubuntu, PSR

=> Record published!

=> http://shelr.tv/records/4f97aa039660804431000093

user@user-Vostro-230:~$ 

For further queries, please mail to psrdotcom@gmail.com