Creating the ideal local development environment is a key component of being an efficient developer, but it sometimes takes a bit of trial and error to create the website development environment that works best for you. One important component of this is finding a way to share files between your various dev stations so that you can quickly switch computers and pick up where you left off. For me, I prefer WAMP and Google Drive as my current weapons of choice. This may change over time, as it has many times before, but for now the following important tasks are accomplished with this workflow:
- I can develop a website quickly without having to deal with FTP uploads
- I can utilize popular tools like an SCSS preprocessor and Chrome Dev Tools to quickly see code changes persisted into the browser
- All of the files that I want to share between machines are shared, and the files that I don’t want to sync are left alone
- I am able to accomplish this with minimal additional cost as Google Drive includes ample storage with my existing plan
Step 1: Install WAMP
The first step, if you haven’t done this already, is to set up WAMP on your local machine: http://www.wampserver.com. I won’t cover how to install WAMP in this article as it is really straightforward and there is sufficient documentation on their website.
Step 2: Install Google Drive – Google Backup and Sync
Note that you will have to pick a storage plan that fits your storage needs. I am getting by on the 30gb plan that comes with my Google account. Here is the current location for this bad boy: https://www.google.com/drive/download/
During the installation process, you will be asked whether you want to backup folders from your Desktop (I chose not to) and whether you want to “Sync My Drive to this Computer.” The difference here is that My Drive is a special folder that is used for syncing files between multiple devices and the cloud, while the “Desktop” option will only backup your selected files to the cloud. For the purposes of this demo, you will want to choose to sync My Drive. You can also choose to just sync certain folders in your My Drive, which is recommended as it will help you organize your dev files from your standard shared files.
Step 3: Configure WAMP to use the Google Drive for syncing
Now that you have both apps up and running, its time for the fun part:
- Go into your WAMP directory (for me I chose to install WAMP directly in my C: drive), click on the “www” folder, and then CTRL+C to copy it.
- Navigate to your Google Drive folder. This is your My Drive folder that was set up by Google Drive during the installation process.
- Paste the “www” folder in this directory, or in a subdirectory if you prefer to add an extra layer or two of organization.
- Go back to your WAMP directory and go to bin\mysql\mysql5.7.24. Copy the “data” folder
- Navigate back to the Google Drive folder where you pasted the “www” directory, and paste your “data” folder there.
- Start WAMP, click on the tray icon, then go to Apache > httpd.conf to open it in a text editor:
Replace DocumentRoot and Directory variables to point to your new “www” location. In my case, these are on line 263 and 264:
- Save that sucker, then open up your httd-vhosts.conf file using the same method as you used to open the httpd.conf file. As you can see in the screenshot above, they are right next to each other in the WAMP tray menu.
- Replace DocumentRoot and Directory variables to point to your new “www” location. In my case, these are on line 6 and 7:
SWEET! Now WAMP is set up to look for your files in the Google Drive directory. Now lets get it set up to look for your databases there as well. Open up your my.ini file from the WAMP tray icon:
Replace the datadir variable to point to your new “data” location. In my case, this is on line 47:
Save that file, then restart all WAMP services. That’s it! Your done! Well…kinda. You still need to test it out. You could create a simple test.html file in your new www folder and then navigate to it in a browser. In my case, the URL for the test file would be: localhost/test.html
Syncing with other computers
So now you have one computer that shares its key WAMP folders with the cloud. To also have access to these on another computer, you need to follow the exact same steps as the steps above on each computer. The only difference is that your directory for the “www” and “data” folders will likely be unique for each computer.
Parting notes
When I was setting this up, I ran into a small issue – my file permissions prevented Windows from starting Apache and MySQL. To fix this, you just need to navigate to your Google Drive folder, right click, go to “Properties > Security > Advanced > Enable inheritance.” This process may take a while depending on how many files are in your My Drive folder, but it should fix the permissions issue.
About Valier
Valier (pronounced “Va-leer”) is a boutique graphic design and website development studio focused on creating unique projects for unique clients. We work with companies and individuals that are pushing the boundaries within their industry and are looking for a partner in media development that can inject life and creativity into their marketing presence. With over 10 years of experience in the graphic design and website development industries, Merritt Lentz (Founder), has a proven track record of producing successful and innovative projects for a wide variety of clients ranging from artists and ski companies to government agencies and payment processing companies. Regardless of the size or complexity of your vision, we will help you hone in on a digital actualization of that vision and deliver a product that is rich and captivating.