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 1.2.3.4 (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).

my-site.conf

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:

/etc/nginx/sites-enabled/my-site.conf

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.

Virtual Box And Vagrant

You need to install Virtual box first
* there are multiple ways to install virtual box

Problems with FTP

If you are using FTP you will need to install lftp on your ubunto server box

Virtual Box

Install

But an easier way is to install homebrew.

Install with brew

We just need to add the cask tap and then install brew cask.

source of this info

Now install Vagrant either from the website or use homebrew for installing it.

Vagrant-Manager helps you manage all your virtual machines in one place directly from the menubar.

Add the Vagrant box you want to use.

Now lets start the machine using the following command.

You can ssh into the machine now.

go into your folder that has Vagrant file

Go to this URL http://vvv.dev and you will see the dashboard

The Backstory

On a Mac the tradition has been to use MAMP. It is free to get PHP, MySQL, phpMyAdmin and Apache up and running quickly. This is great for WordPress. Millions of people currently use this process.

There is a problem though and that is that is what if you are working on a team and member of your team is using different machines and different setups of MAMP which could have different versions of PHP, MySQL and Apache.

The solution is to have your own box to test in and that is where Vitural Box comes to the rescue. It doesn’t matter if you have a PC or a Mac because you can create a virtual Linux box on either system. Oh, and it’s free.

But then we have another problem and assuming we are not all sysops people (Systems Operations) and have a thorough knowledge about servers and how to configure them that is where Vagrant comes into play. Vagrant will make creating our server box easy and dare I say fun.

Vagrant

Useful commands

  • any time you make a change to the configuration you can do the following to stop your vagrant instance.

Then you want to run the following to take into consideration all the changes to the configurations.

SSH into your box

You’ll be using this one a heck of a lot

Update your vagrant box

“Create and configure lightweight, reproducible and portable development environments.”
* Download Vagrant
* Video How to Install and Use Vagrant

  • Where do you want to put your box on your machine?

  • Now let’s add a virtual box to our machine

Box Added!

  • Now we need to create a Vagrantfile

Now get the box running

You now can easily SSH into the box

You are now logged in via SSH to your virtual box!

Installing Stuff On Your New Box

Install git on the box

Bam! after a couple of minutes you now have git install on your virtual box.

Exit out of SSH

Open the Vagrantfile in ST3 (using your alias)

  • After file opens change syntax (bottom right of ST3) to Ruby to make it pretty

Uncomment (remove #) on this line and change the IP to whatever you want

Changed to:

  1. Save
  2. Reload Vagrant with:
  • The following command will shut your box down and reboot it with new configuration setting (new IP address)

If you open your browser and try to go to http://1.2.3.4 you will get page not found error. It tries to load it but stops right away. The reason is there is no web server running (like Apache).

Before we go any further it is a good idea to update your box. Always a good idea when you spin up a box the FIRST THING YOU SHOULD ALWAYS DO IS RUN THIS COMMAND.

NGINX Server

Install nginx

Once installed we need to start the server.

Now if you browse to the IP you set http://1.2.3.4 the page runs!

But if my domain I am working with is http://ilovela.com how can I get this domain to show my test site?

Go to the domain now and see that it does not work.

Now we need to map this IP to a domain name.

Now open the hosts file on your Mac inside ST3

Or if you don’t have ST3 and Terminal connected using an alias use this instead:

  • In this file DO NOT CHANGE ANYTHING ALEADY THERE
  • Just go to last line and add your IP and to the right of the IP, your domain name.
  • Just like this(the last line is the one I added):

Save and visit ilovela.com and you will see your same site from before.

But an even better way is prefix the domain you are working on with dev, so our site will now be known as dev.ilovela.com

Make the change in your host, save and browse to that new dev subdomain.

Why Vagrant instead of MAMP or XAMP or WAMP?

  • You can play around with linux machines
  • You can destroy them when you are finished
  • Running a Vagrant file in the repository for their project. You will be able to see a box that can be exactly like your production box.
  • Your code is not tied to one machine. Other devs on your team could be using an older version of MAMP or XAMP or a different PHP version or a different Apache version or a different MySQL or phpMyAdmin. If all of your team is using Vagrant you are all testing on the exact same instance of your production server. So the question that comes up with developers all the time is Well that doesn’t happen on my machine, why is it happening on your machine? is solved.

How to create a PHP Environment on Vagrant?

puphpet.com(https://puphpet.com/)
* Sets up:
– php
– mysql
– phpmyadmin
– ip and other useful names

When you use puPHPet to get your vagrant config file generated here are some important points to remember. The site has changed a lot in the last 3 years so as of 1/18/2016 this is the way it works:

  • Under Deploy Target choose local
    • Set your IP address to what you want (example: 10.20.30.40)
    • Set your host name to what you want (wordpresstest.dev)
    • Increase your memory from 512 to 1024 (1Gig)
  • Under Web Servers choose Apache
    • It is what most hosts use when working with WordPress and most people know more how to configure it than nginx.
  • For language choose php and right now the most popular stable version is 5.6
  • For Databases choose MySQL (although they recommend MariaDB)
    • Install Adminer (similar to phpMyAdmin (although they recommend Sequel Pro or Workbench))
    • by default the root user pwd is 123
  • Create Archive
    • Save to your Downloads folder
    • Extract and rename to your project title
    • Move to your dev sandbox
    • Once there, you can use the vagrant up to spin up your server instance
      • and vagrant SSH to gain access to that box via SSH

You will need to remember your IP and hostname to update your hosts file.

One very cool thing is that when you SSH into the server

So you are in the www folder and you create a file. If you have your project folder on your machine open my location for that is Documents/wordpresstest you will see the file you created on our linux box has also been created on our machine folder. This is possible because the two folders are sym linked. This enables us to use all our cool dev tools we like on our Mac machine and see the files run on linux. Very Cool!

Start and Stop the Apache server

To turn your virtual machine off

Logs you out of the server.

Turns your box off

How to install PHP on a virtual machine using a Mac

vagrant destroy This permanently removes the virtual environment from your machine.

vagrant reload and vagrant reload --provision If your environment suddenly stops working, it’s useful to reboot by running this command. If you add the —provision flag, it will reprovision the box as well. This is useful with removing or adding things to the server via Cookbooks or Puppet.

vagrant ssh Anything you edit on your computer in the public folder is automatically shared to the virtual environment without having to SSH in. However, if for whatever reason you need to connect to the virtual server, just run this command.

vagrant ssh-config This lets you see the detailed login credentials of how you could connect to the virtual environment.

Tip – Sharing folders with local VM
* Change from ./ to ./workspace/

When you get the config file from puPHPet, save the zip file to this path:

Documents/dev/puPHPet/wp-project-name-here
* extract the zip
* the random named file is the name of your server so you just need to make sure if you are running multiple server instances that the server folder name is not duplicated, the IP is not duplicated and the domain name is not duplicated.
* delete the zip file (keep your stuff clean!)
* create a workspace folder

Download WordPress

Download link to Downloads
* Extract WordPress
* Delete Zip file
* Move files inside wordpress folder into your workspace folder for your project.

Visit your domain or IP address for your virtual server.
Install WordPress as you normally would.

  • Using LastPass with Vagrant has an added benefit – instead of saving a billion username and passwords for all the localhost project sites, lastpass can work with your unique dev domain names. Way easier to find because there is only one.
  • Choose a hard password because you most likely will forget when you push it live and then you’ll have a weak password in production which is a huge security risk.
  • Never make your username admin. It is the default and hackers will first plug that in when you they are using a brute force attack against your site and just by using any other name besides admin your site is at least 35% more safe from the prying hands of dubious hackers.
  • Make sure you check the Discourage search engines from indexing this site when you are developing but when you do finally deploy your site into production, it is equally essential you UNCHECK this box so you are NOT INVISIBLE TO SEARCH ENGINES which would be really bad for your business.

Speed Up WordPress install with WP CLI!

How do I access Adminer (similar to phpMyAdmin)

ip-address/adminer
example: 10.20.30.40/adminer
Create your database: (I named mine wordpresstest)
default user: root
default pwd: 123

VVV
* first install Virtual Box
* second install Vagrant 1.7.x

then install triggers

Variable VVV
VVV Dashboard

Clone the VVV project into a local directory
* Varying-Vagrant-Vagrants / VVV github

with this command

cd into vagrant-local

then

Go get coffee. Could take 30 minutes.

WordPress Stable

LOCAL PATH: vagrant-local/www/wordpress-default
VM PATH: /srv/www/wordpress-default
URL: http://local.wordpress.dev
DB Name: wordpress_default
WordPress Trunk

LOCAL PATH: vagrant-local/www/wordpress-trunk
VM PATH: /srv/www/wordpress-trunk
URL: http://local.wordpress-trunk.dev
DB Name: wordpress_trunk
WordPress Develop

LOCAL PATH: vagrant-local/www/wordpress-develop
VM PATH: /srv/www/wordpress-develop
/src URL: http://src.wordpress-develop.dev
/build URL: http://build.wordpress-develop.dev
DB Name: wordpress_develop
DB Name: wordpress_unit_tests
MySQL Root

User: root
Pass: root
See: Connecting to MySQL from your local machine

Solutions to common problems

vagrant ssh isn’t working

And you get an error similar to this:

vagrant ssh error

Just make sure to to run vagrant up before you run vagrant ssh

update your vagrant box

It’s a best practice
update vagrant box message

If you see something like above

Just run this:

Caution on vagrant box update

When you run in and then try to vagrant ssh your box sometimes forgets about your web site directories. What I do to fix this is open virtual box and manual shut down the vagrant box. I then run vagrant up and then when I use vagrant ssh, it knows about my web site directories.
This has happened a few times to me when I updated Vagrant box so just be aware of it if it happens to you.
(It’s pretty scary when you feel all your sites are gone.. the config should be on another computer too… just to be safe)

Essential Web Dev Tools

  • homebrew (mac) install
  • iterm2 (mac)
  • MAMP (mac)
  • Git (install on pc, old version pre-installed on Mac)
  • Signup Github Account
  • Download WordPress
  • Local/Staging
  • Install WordPress
    • root server folder
    • create DB in phpMyAdmin
  • VirtualBox (install at home)
  • Vagrant (install at home)
  • VVV (install at home)
  • VV Dashboard (install at home)
  • VV (install at home)
  • WordMove (install at home)

Composer

Useful Chrome browser extensions

Y – Y link
* quick way to added html filler text to WordPress pages or anywhere.

Symbolic Linking on Macs (sym links)

Symbolic links are awesome and they really make life easy. Here’s an example of why I would use a symbolic link:
I have a notes folder in ~/Documents/dev/notes/web-dev-notes. Inside this folder I have a git repo initialized so I can push and pull commits from my laptop, work computer, school computer and home desktop. This works great but there are some files like connection information that I keep in digital notebooks. I add these files to my .gitignore so I don’t push them up to github as it is a public site people can see them. I could drag and drop them into my Dropbox folder but then I would have a duplicate of the same file and this is a big problem because it will be a pain to manually keep the files in sync. I could also just move the folder into Dropbox but that is bad too because all my files would have to be in Dropbox and I like to put certain files in certain places in my computers. The best thing to do here is to create a sym link between a folder on your Mac and the Dropbox folder. To do this you cd ~/Dropbox and once there you open another terminal window and browse to your notes folder. Once there type: pwd in the terminal to get the absolute path of where you are. Let’s say it gave you this path: ln -s /Users/USERNAMEHERE/Documents/dev/notes/web-dev-notes

Then just (from the Dropbox root folder on your mac) type this in the terminal

That’s it! Your folders are now linked so that when you make any changes on your file on your Mac (my notes file) it will be updated at the same time in the Dropbox folder. Since that folder will push it up to dropbox. You can easily access the file anywhere there is an internet connection.

Here is a great video showing you how to do this

Homebrew (Free)

For Mac, you need this to install stuff you should have on your mac as a developer
* Homebrew needs Mac’s XCode to be installed. It is a free install but large so when you install it, go grab a cup of coffee.

Update Homebrew

Install Homebrew (Free)

homebrew link

Update Git (Free)

Install using homebrew so you are using the latest and greatest git, the git on most macs out of box is way outdated

Get the most updated version of Git

Tree (Free)

Use brew to install tree command

On PCs you have the command prompt. It is what PC users use instead of the Terminal. It has a native tree command. Macs do not have this command. Homebrew makes it easy to install. It just quickly shows you what is recursively inside folders.

Use tree command

  • browse to directory you want to examine

  • Install stuff with brew

imagemagick

  • free software to create, edit, compose or convert bitmap images

  • Note: I am chaining 3 brew commands together

Fixing Homebrew problems

Every day you work with homebrew make sure you to update and upgrade. Many of the homebrew problems you encounter will be fixed updating and upgrading.

Hub hub link

  • Command line wrapper for git that makes you better at GitHub
  • Say you want to create a github repo from your Terminal. It’s easy with Hub!

Imgur Screenshot app (Free)

  • I like to use cmd + shift + 4 to take a quick screenshot and this shortcut let’s me choose the size I want. With imgur I can take the screenshot, upload that screenshot to the imgur website and save the URL of that remote image in my clipboard. This is very handy when taking notes with markdown as I can just use markdown with ![image description](image-url-on-imgur-here) and that screenshoot will be in my notes that I can easily email to a client using ST3’s markdown packaged (markdownediting and markdown preview)

Mac2Imgur
Take a screenshot and it’s uploaded to imgur.
* I like to have this running as soon as my computer starts. You can change that it is’s setting. This is what it looks like mac2imgure icon


* If you also use Dropbox make sure this option `Share screenshots using Dropbox’ is unchecked in Dropbox’s settings as it will conflict with Mac2Imgur]
* I also like setting this option so that all the screenshots that I’m taking are not littering my desktop. They will be automatically deleted once they are uploaded to imgur.
setting to auto delete uploaded imgur screenshots

Jumpcut (Free)

Multiple saves of stuff you copy to clipboard
This is what the icon looks like jumpcut icon

BetterSnapTool

Browser Window Management
* Spectacle
* Moom
* Divvy
* all others

Chrome Dev Tools

  • set up so Chrome points to Sass source file
  • set up so change in dev tool makes change to original source scss file

Auto refresh browser

LiveReload

BrowserSync

CodeKit

Browserstack link

Bower link

  • A package manager for the web

Gulp link

  • automate and enchange your workflow
  • I like Gulp better than Grunt

Grunt link

  • JavaScript Task Runner

Toggl link

  • Track your project time

##iTerm2 linki
* This is superior to using just the Terminal. Lots of benefits.

Modernizr

Modernizr – use modern stuff and fall back to old stuff if browser sucks

HTML5 boilerplate

Problems to be aware of if using Google Docs

Note: copy/paste in google might give you wonky quotations

Solution: turn off smart quotes in google docs

screenshot

LICEcap – simple animated screen captures (free)

Great for adding to your markdown notes

JSBIN

Online code editor to practice your JavaScript

spectacle

Free app for OSX window management

RegExr

Free online way to practice regular expressions

Regex Golf

Learn regular expressions the fun way

RegEx Testing

Interview Cake

Get prepared for programming interviews

Typing.io

Practice typing faster (specific to programmers)