How To Set Up Project.dev Domains on a Dev Server

If you are like me and have been a Web Developer/Programmer for most of your life or even if you are new and just getting started. One of the most important tools you can get and configure is a proper Local Dev Server (Development Server).

There are many ways to go about this. One of my favorite is using an Aplication called Vagrant and VirtualBox but that is much more advanced then I care to get into at the moment. There are pros and cons to each method. There is also the factor of which Operating System you are using. This article is not going to get into all the different Dev Server methods available though. I am going to assume you have a Dev Server already set up an running. In fact this example will be based on using the Xampp Dev Server which is a nice little self contained package to install a fully functional LAMP server on Windows, Mac OS X, or Linux. I am using it on a Windows 7 machine though.

As of the time of publishing this article, Xampp was at version 1.8.3 which included the following software…

• Apache 2.4.4
• MySQL 5.6.11
• PHP 5.5.1 Nice!
• phpMyAdmin 4.0.4
• FileZilla FTP Server 0.9.41
• Tomcat 7.0.41 (with mod_proxy_ajp as connector)
• Strawberry Perl 5.16.3.1 Portable
• XAMPP Control Panel 3.2.1 (from hackattack142)

Setting up Local Domains for our Projects

If you are like me, you might not like using a URL like this https://localhost/projects/project-name-here to access your projects.

It’s more then that though. Some projects simply don’t woirk correctly when nested into a bunch of folder levels like that, it generally means the project was not coded with the developer in mind but that’s beside the point. We can set up our own local domains to use on our projects on our Dev Server and I will show you how in this article.

This article shows how to do this on a Windows 7 machine running the Xampp Dev Server package which is a LAMP server. But most of it should work on other systems without to much effort. It’s all basic concepts.

So my current Dev Server Web folder looks like this…

For all my big projects I have a folder named /projects that lives under E:/Server/htdocs/ so all projects are under E:/Server/htdocs/projects.

Now to organize it more, under /projects is a folder with the name of the Project. This will also act as the domain name appended with .dev. So for this article the example domain and project I am creating will be called project-name-here

So our new project’s folder path will be…
E:/Server/htdocs/projects/project-name-here/

and accessible in the web browser at this domain when we are done…

https://project-name-here.dev
and
https://www.project-name-here.dev

That is the end result and the best part is it is very simple to maintain. We simply add the Project folder for a new project in the correct location and add a Hosts file record for the domain and then we are good to go! More details below…

Setting up my Apache VirtualHost File

The file for my Xampp Apache VirtualHosts settings is located at this path on my Windows 7 PC.
E:Serverapacheconfextrahttpd-vhosts.conf. The location of your will likely be different but with some searching you should be able to find it.

The modifications to the file include adding this below…

E:/Server/htdocs/. Inside my /htdocs folder I have a folder named /projects. This /projectsfolder is where all my Web Projects that get there own domain name will live.

So if I want to have an example project named project-name-here. I simply create the /project-name-here folder inside my /projects folder. Inside my newly created project-name-here folder I then create a folder named /www. This is the Web Root for my new project, which also gets a Domain name of https://project-name-here.dev and https://www.project-name-here.dev thanks to our custom VirtualHosts code in the example above.

You can see the %-2 in our file path E:/Server/htdocs/projects/%-2/www. This is telling Apache to capture the 2nd to last phrase and then we use it to look for that folder. If that folder exist, then we serve the files from it! Beautiful

Setting up my HOSTS File

Moving on, we covered the Apache side of things above, however we are not done yet. The problem now is even though you Dev Web Server might be configured. There is no DNS records to tell your computer that https://project-name-here.dev or https://www.project-name-here.dev should point to your Dev Server.

To do this we just need to modify your systems HOSTS file and add the entries like below.

Add our new entries to the hosts file and save it.

Finishing Up

1. Edit the Apache VirtualHosts records file.
2. Then Edit the Operating Systems Hosts file.
3. Reboot Apache
4. Open your browser and try to visit the new domain. project-name-here.dev and www.project-name-here.dev. If everything worked, it should load the contents from this directoryE:/Server/htdocs/projects/project-name-here/www/li>

Enhancing it Even More

This is a really basic example. There is so much you can do with this to make it even better. I will explain a couple things I have done on mine and what I plan to do next.

For starters, prior to today, my version only worked for project-name-here.dev and the www sub-domain version www.project-name-here.dev would simply not work. So to enhance this more, I have added in the ability to also map www.*.dev So that my domain will load the same resource with or without a www in the URL.

Another addition I plan to add is setting custom Log file paths.
You noticed in my E:/Server/htdocs/projects/project-name-here/ folder, I do not simply load the contents of that folder. Instead I have purposely set it up to load from a /www folder inside of our project folder.

The reason for this is now when I open a project folder. The root of that folder will have the www folder. But I can also add other important project related files to this folder and it will not be part of the web folder. For example in the project folder, I can have files with login information, or PSD image files to edit certain images, notes or information that is private for me about the project or client. I really like the way it;s set up like this.

So my next enhancement will be to have Apache’s log files, log into this project root folders /log folder. This will make the files stay within the project instead of being lost in my Apache and system somewhere for ALL projects and will also make it part of the project while still separating it from the main site contents.

Automate it even more. I have built a custom PHP script that automates this even further. I load a page that has an input form. I type in the name for my Project.

1. I type in the name for my Project
2. The project Folders E:/Server/htdocs/projects/* and E:/Server/htdocs/projects/*/www are created
3. It also then runs a small .exe program I have that automatically adds the 2 new records
   127.0.0.1 *.dev
   127.0.0.1 www.*.dev
   are both added to my Hosts file and saved.
4. It then also creates a database for the project with the same name.
5. On success of all this, it creates my project folders, adds my Hosts records, adds a database for the project, then it prints all this data with File paths, database name and connection information, URL’s to view the project in the browser and file path to where the project lives all printed to the screen.

I plan to enhance this even more though. I plan to add a checkbox to have it install a blank copy of WordPress and also option to install a fresh Magento eCommerce install.

What Would You Do?

Please feel free to leave comments about how you would improve this or which enhancements you are using or would use =)

To stay up to date on our posts and other resources (we share and aggregate a lot of good quality Web Developer resources and articles that we run across on Twitter and Facebook) so be sure to Follow/Like us and if you are feeling up for it, subscribe to our email newsletter. Currently sends 1-2 emails a month but that will improve over time.

 

Fonte: http://www.codedevelopr.com/articles/how-to-set-up-project-dev-domains-on-a-dev-server/

• Apache
• windows