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 18.104.22.168 (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.
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:
Reboot the server
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.
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
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.
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.
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://22.214.171.124 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.
$sudo apt-get update
$sudo apt-get install nginx
Once installed we need to start the server.
$sudo service nginx start
Now if you browse to the IP you set http://126.96.36.199 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:
$sudo open/etc/hosts-a"Sublime Text"
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):
# Host Database
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
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.
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!
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:
* 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 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)
Create your database: (I named mine wordpresstest)
default user: root
default pwd: 123
* first install Virtual Box
* second install Vagrant 1.7.x
LOCAL PATH: vagrant-local/www/wordpress-default
VM PATH: /srv/www/wordpress-default
DB Name: wordpress_default
LOCAL PATH: vagrant-local/www/wordpress-trunk
VM PATH: /srv/www/wordpress-trunk
DB Name: wordpress_trunk
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
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:
Just make sure to to run vagrant up before you run vagrant ssh
update your vagrant box
It’s a best practice
If you see something like above
Just run this:
$vagrant box update
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)
Git (install on pc, old version pre-installed on Mac)
Signup Github Account
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)
$brew install 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.
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.
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
$brew install git
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.
$brew install tree
Use tree command
browse to directory you want to examine
Install stuff with brew
$brew install(whatever you want toinstall)
free software to create, edit, compose or convert bitmap images
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)
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
* 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.
Multiple saves of stuff you copy to clipboard
This is what the icon looks like jumpcut icon