Redirect Port 3000 to Port 80 with ExpressJS in Production with Nginx

Several hours ago I purchased a domain from namecheap and my goal was to have the site go live. Simple right? Well it wasn’t as simple as I first thought.

First I was using ExpressJS. I like Express.
I was also using Digital Ocean. I like Digital Ocean.
Namecheap is a great place to get cheap domain names.

You buy the domain and you manage that domain by pointing it to the 3 name servers of Digital Ocean. Simple. Done.

You create a DigitalOcean droplet. Make it Ubunto. Have node preinstalled. Choose the smallest size and select one of your existing SSH keys. Kind of simple. Done.

You use Express generator to make a quick down and dirty Express app. Simple, fun and done.

I watched a few Youtube videos on how to create a deploy user on Digital Ocean. You don’t want to do everything as root user as that is not safe.

The video walked through SSH on Digital Ocean and using flightplan to quickly push the express app to production or staging. Super cool.

I had to work with flushing DNS to make sure I wasn’t looking at a cached domain. I had to make sure I found the right flush for the right Mac OS (Capitan). I screwed up a few droplets so I blew them up and recreated them. Then had to recreate the deploy user. I also had to get SSH access for both root and deploy.

I had to move from using forever to a service so that if my server ever rebooted it would start my site back up automatically.

I had to change jade templates to Pug because jade is not longer the name because of a copyright violation.

My IP would work on port 3000 but not the domain. After flushing and waiting a bit, the $ ping (fake IP to show that I was pinging my domain to see if it was pointing to the correct IP.. it wasn’t at first, but after flushing, it was – this was caused by my deletion and recreation of several droplets).

Eventually, my domain was working but since my Express is only showing on port 3000 in the code, I could not get my domain to just work without the port number. I was mad that people would have to access my site with a port number. There had to be a better way. There is.

Install Nginx

You have to first install Nginx. This link showed me how to do this on my DO server (make sure you are logged in as root).


You can use a very simple Nginx configuration to “re-route” port 3000 request to the port 80.

Create this file

etc/nginx/sites-enabled/my-site.conf (name it your domain.conf – example.conf)`

I used nano to edit this file:


server {
        location /  {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;


Reboot the server

$ reboot

Now visit the domain without the port number appended and you should be golden.

Not the way I wanted to spend my Saturday but hopefully my pain can be your gain.

The ZSH Shell

What is the Zsh shell?
It’s just a terminal.

Why use Zsh?
This is a really cool terminal.

There are many Pros to why you should use the Zsh shell. Here’s my sales pitch to using it.

  • Pros
    • lower case completion** document Document both work with tab
    • history based on what you have already typed in prompt – if you type c and hit up arrow, will only show you commands with c
    • Better than man page ls - tab see all flags!

Make directory and takes you inside it!

$ take

Powerline fonts

  • Add powerline fonts

This is what the plain Terminal looks like:

This is what Zsh looks like:

Just based on that alone is cause to use Zsh. But there are tons of other things Zsh give you ability to do. If that doesn’t pull you over to the dark side, watch these *free Videos by Wes Bos.

  • Thanks for the tip Sean!


Read more about oh-my-zsh

Great people got together to make working with zsh great.

Install oh-my-zsh

$ sh -c "$(curl -fsSL"

See hidden files

When working with zsh you will want to see hidden files. Just add the code below to get it to work.

source: show hidden files on mac

$ defaults write AppleShowAllFiles YES

Press return and relaunch finder (hover over finder icon on dashboard and hold down option key, this will let you relaunch finder)
* You can also choose from dropdown

Now when you open it up you will see hidden files like .zshrc and .oh-my-zsh

Choose a theme

Lots to choose from.

Here’s one theme:



This is your profile config file for zsh. The bash shell has the .bash_profile file. zsh has the .zshrc file.

It is located in the user directory (~/.zshrc)

Open that file in Sublime Text and change the ZSH_THEME.


Take the shorter PATH

One of the first things that bugged me is the long file paths in the Zsh. It made working in zsh problematic. There is an easy solution where you just show the parent and grandparent directorires only.

This is the function that creates the path you see output in the zsh

prompt_dir() {
  prompt_segment blue black '%2/'
  #echo $(pwd | sed -e "s,^$HOME,~," | sed "s@\(.\)[^/]*/@\1/@g")
  #echo $(pwd | sed -e "s,^$HOME,~,")

Since I have the number 2, I will only ever see 2 directories

Something that looks like this:
long zsh path

Can be made to look like this:
short zsh path

What is my Path?

If you ever need to find out the full path, just type $ pwd.

What’s my current theme in zsh?

Open your .zshrc file


Where are my Zsh themes located?

Open up that theme by going to your themes folder

$ cd ~/.oh-my-zsh/themes/

I’m using the cobalt2 theme so I opened that theme up and commented out the existing code (comments are made using #)

Using Vintage Mode in Sublime Text – The Skinny

Vintage Mode

The best coders I know use Vim and the reason is they’ve learned to do everything with just their keyboard. If you never use your mouse, you quickly learn that typing and getting stuff done gets easier and faster.

You have the option of using Vim mode in Sublime (called Vintage Mode). While it doesn’t have all the bells and whistles of Vim, it has enough to make you dangerous. If you want to see all the possibilities out there, check out this link.

I use vintage mode in Sublime Text everytime I use Sublime Text. In order to use this properly, you need to follow several steps and learn several keyboard shortcuts. Here are the steps and the keyboard shortcuts.

Open the User Preferences file and remove Vintage from the ignored files.

Open Preferences File

Preferences > Settings - User

Change this:


To this:

note: By default Vim mode is turn off, so you are turning it on by making sure it is not ignored.


Enter Vim Mode with keyboard shortcut

I like to add a keyboard shortcut to quickly enter Vintage Mode. There is an option to jump right into Vintage Mode when you open Sublime Text but I’m not a fan of that. With the following key binding implemented, I can quickly jump into Vintage mode by just typing the j + j key binding keyboard shortcut. Here’s how you set this up.

Sublime Text 3 > Preferences > Key BindingsUser

Add this code:

{ "keys": ["j", "j"], "command": "exit_insert_mode", "context": [ { "key": "setting.command_mode", "operand": false }, { "key": "setting.is_widget", "operand": false } ] }

Useful Vintage Commands

Vintage includes most basic actions:

Key Function
Escape Key Gets out of the current mode into the command mode (All keys are bound of commands)
i Insert mode for inserting text (Keys behave as expected)
d delete
y copy
gu lower case
gU upper case
g~ swap case
g? rot13
< unindent
> indent
h left
j down
k up
l right
b move backward one word (previous alphanumeric word)
B move backward one word (delimited by a white space)
5b move backwards 5 words
w move forward one word (next alphanumeric word)
W move forward one word (delimited by a white space)
5w move forward 5 words
G move to the end of the file
gg move to the beginning of the file
0 move cursor to beginning of line
$ move cursor to end of line
a Insert text after the cursor
A Insert text at the end of the line
i Insert text before cursor
o Begin a new line below the cursor
O Begin a new line above the cursor
{ Jump to previous paragraph
} Jump to next paragraph
dd delete line
3dd delete three lines
dgg delete to beginning of file
d) + return delete to end of sentence
dG delete to end of file
x delete charcter
dw delete word
d0 delete to the beginning of a line
d$ delete to end of the line
d delete word
c change
y yank
> shift right
> shift left
~ switch case
dit delete inner tag
di’ delete inside single quote
v enter visual mode (must be in command mode first)
V enter line in visual mode (must be in command mode first)
/search_text search document for search_text going forward
?search_text search document for search_text going backward
n move to the next instance of the result from the search
N move to the previous instance of the result
u undo last operation
ctrl + r redo the last undo
yy copy current line into storage buffer
p paste storage buffer after current line
P paste storage buffer before current line
r{text} Replace the character under the cursor with {text}
R Replace characters instead of inserting them
^ moves the cursor to the first non-empty character of the line

Keyboard key repeat

When working with Sublime Text 3 you must make this change or you won’t be able to uses VIM mode without going insane. So if you are moving around the document with your keyboard you’ll want to hold a key down and keep moving up or down your document. By defaut on Macs you’ll have to press your keyboard key every time you want to move. The following command will enable you to just hold the key down and it will keep moving the way you want. You would think this setting would be on by default but it’s not. So make life better and make the following change using your Terminal.

Add this in the terminal

$ defaults write com.sublimetext.3 ApplePressAndHoldEnabled -bool false