[{"data":1,"prerenderedAt":706},["ShallowReactive",2],{"\u002Fblog\u002Fweb-development-environment-using-devilbox":3,"related-\u002Fblog\u002Fweb-development-environment-using-devilbox":665},{"id":4,"title":5,"author":6,"body":10,"categories":643,"cta":645,"date":646,"description":647,"excerpt":645,"extension":648,"image":649,"imageAlt":650,"meta":651,"navigation":652,"path":653,"readingTime":654,"seo":655,"stem":657,"tags":658,"__hash__":664},"blog\u002Fblog\u002Fweb-development-environment-using-devilbox.md","Web Development Environment using Devilbox",{"name":7,"avatar":8,"description":9},"Perlat Kociaj","\u002Fimages\u002Fperlat.jpeg","Full Stack Web Developer",{"type":11,"value":12,"toc":627},"minimark",[13,22,34,39,48,71,90,93,97,118,121,124,129,132,148,155,163,166,172,175,179,204,211,218,223,237,247,251,254,261,270,282,327,335,339,342,358,383,390,394,401,404,411,415,418,425,429,453,457,460,463,527,533,539,552,559,565,572,588,594,597,610,617,621,624],[14,15,16,17,21],"p",{},"I've always been using WAMP as my local dev environment for a quite amount of time while i was using Windows OS, then I switched to Mac OS and used MAMP for a while. That was the case until one of my colleagues recommended ",[18,19,20],"code",{},"devilbox",". I gave it a try, and since then I've been using it as my local dev environment.",[23,24,25],"blockquote",{},[14,26,27,28,33],{},"Looking for a developer who knows modern tooling inside-out? See my ",[29,30,32],"a",{"href":31},"\u002Fservices\u002Fweb-development","web development services",".",[35,36,38],"h2",{"id":37},"what-is-thedevilbox","What is the Devilbox",[14,40,41,42],{},"No, it does not has to do anything with the devil. As the author describes it in the official ",[29,43,47],{"href":44,"rel":45},"http:\u002F\u002Fdevilbox.org\u002F",[46],"nofollow","website",[23,49,50],{},[14,51,52,53,60,61,65,66,70],{},"The Devilbox is a modern and highly customisable ",[54,55,59],"strong",{"className":56},[57,58],"markup--strong","markup--blockquote-strong","dockerized PHP stack","supporting full ",[54,62,64],{"className":63},[57,58],"LAMP"," and ",[54,67,69],{"className":68},[57,58],"MEAN"," and running on all major platforms. The main goal is to easily switch and combine any version required for local development.",[14,72,73,74,79,80,84,85,89],{},"You don’t have to worry if your Operating System will support it. The Devilbox supports ",[54,75,78],{"className":76},[57,77],"markup--p-strong","Linux",", ",[54,81,83],{"className":82},[57,77],"Mac, ","and ",[54,86,88],{"className":87},[57,77],"Windows"," OS!",[14,91,92],{},"The Devilbox is running",[35,94,96],{"id":95},"requirements","Requirements",[98,99,100,104,107,115],"ul",{},[101,102,103],"li",{},"Computer with decent specs",[101,105,106],{},"Internet Connection",[101,108,109,114],{},[29,110,113],{"href":111,"rel":112},"https:\u002F\u002Fwww.docker.com\u002F",[46],"Docker"," Installed",[101,116,117],{},"Git Installed",[14,119,120],{},"I do believe I do not need to go through the first 2 requirements 😃.",[14,122,123],{},"To use the Devilbox you will need to have Docker installed on your computer. For the sake of this article and because I am using Mac OS I will show you how to download and install Docker for Mac.",[125,126,128],"h3",{"id":127},"install-docker","Install Docker",[14,130,131],{},"There are many ways to install Docker for Mac",[14,133,134,135,139,140,143,144,147],{},"One way is to head to ",[29,136,137],{"href":137,"rel":138},"https:\u002F\u002Fdocs.docker.com\u002Fv17.12\u002Fdocker-for-mac\u002Finstall\u002F#download-docker-for-mac",[46],"and click ",[18,141,142],{},"Get Docker for Mac"," (the preferable version is always stable). When the download is finished open the ",[18,145,146],{},"Docker.dmg"," the file you just downloaded and follow the instructions to complete the installation.",[14,149,150,151,154],{},"The second is to install it via ",[18,152,153],{},"homebrew"," the MacOS package manager. To install it open your terminal and type the following command",[14,156,157],{},[18,158,162],{"className":159},[160,161],"markup--code","markup--p-code","bash",[18,164],{"className":165},[160,161],[14,167,168],{},[18,169,171],{"className":170},[160,161],"~ brew install docker",[14,173,174],{},"Next step is to run docker and the easiest way to do it is by pressing CMD + SPACE and type docker and then ENTER. You should get a notification when docker is running.",[125,176,178],{"id":177},"install-devilbox","Install Devilbox",[14,180,181,182,189,190,193,194,197,198,203],{},"The Devilbox does not come with any install package to ",[183,184,188],"em",{"className":185},[186,187],"markup--em","markup--p-em","install"," it you have it ",[18,191,192],{},"clone"," the repository to your local machine. To achieve this, we use the command ",[18,195,196],{},"git clone REPOSTIORY_URL.git"," the project’s repo is hosted on ",[29,199,202],{"href":200,"rel":201},"https:\u002F\u002Fgithub.com\u002Fcytopia\u002Fdevilbox",[46],"GitHub",". Let’s proceed to install devilbox.",[14,205,206,207,210],{},"Open a terminal window, and type ",[18,208,209],{},"git clone https:\u002F\u002Fgithub.com\u002Fcytopia\u002Fdevilbox"," and wait for the cloning process to finish.",[14,212,213,214,217],{},"When the clone finishes you need to enter the devilbox directory by typing ",[18,215,216],{},"cd devilbox"," you should see the following.",[219,220,222],"h4",{"id":221},"env-file",".ENV file",[14,224,225,226,229,230,233,234,236],{},"Because the Devilbox is configurable via a ",[18,227,228],{},".env"," file, our next step is to copy the ",[18,231,232],{},"env-example"," file to ",[18,235,228],{},"to so we can run the following command:",[238,239,244],"pre",{"className":240,"code":242,"language":243},[241],"language-text","cp env-example .env\n","text",[18,245,242],{"__ignoreMap":246},"",[35,248,250],{"id":249},"start-devilbox","Start Devilbox",[14,252,253],{},"The time has come, to launch the devilbox!",[14,255,256,257,260],{},"To launch the devilbox you need to run the following command on your terminal while you are instead the devilbox directory. ",[18,258,259],{},"docker-compose up","now it will pull all the required containers! The first time you run this it might take a while, depends on your internet connection. But once you have all the images, you should be able to start all the containers in a matter of seconds (~4-5 seconds).",[23,262,263],{},[14,264,265,266,269],{},"TIP! Run ",[18,267,268],{},"docker-compose up -d"," to run the containers in the background detached from your current terminal window.",[14,271,272,273,276,277],{},"When all the images are pulled, you should be able to access devilbox localhost URL. By default, The Devilbox is listening to port ",[18,274,275],{},"80"," which means you can access it by visiting ",[29,278,281],{"href":279,"rel":280},"http:\u002F\u002Flocalhost\u002F",[46],"http:\u002F\u002Flocalhost",[23,283,284],{},[14,285,286,287,290,291,79,296,79,301,79,306,79,311,79,316,65,321,326],{},"Starting and stopping containers is done via ",[18,288,289],{},"docker-compose",". If you have never worked with it before, have a look at their documentation for ",[29,292,295],{"href":293,"rel":294},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Foverview\u002F",[46],"overview",[29,297,300],{"href":298,"rel":299},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Fup\u002F",[46],"up",[29,302,305],{"href":303,"rel":304},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Fstop\u002F",[46],"stop",[29,307,310],{"href":308,"rel":309},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Fkill\u002F",[46],"kill",[29,312,315],{"href":313,"rel":314},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Frm\u002F",[46],"rm",[29,317,320],{"href":318,"rel":319},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Flogs\u002F",[46],"logs",[29,322,325],{"href":323,"rel":324},"https:\u002F\u002Fdocs.docker.com\u002Fcompose\u002Freference\u002Fpull\u002F",[46],"pull"," commands.",[14,328,329,330],{},"More about starting The Devilbox ",[29,331,334],{"href":332,"rel":333},"https:\u002F\u002Fdevilbox.readthedocs.io\u002Fen\u002Flatest\u002Fgetting-started\u002Fstart-the-devilbox.html",[46],"here",[35,336,338],{"id":337},"configuring-devilboxenvfile","Configuring Devilbox .ENV FIle",[14,340,341],{},"Devilbox is configurable and you can easily switch between dev environments like (PHP, APACHE, MySQL) or (PHP, NGINX, MariaDB).",[14,343,344,345,347,348,352,353],{},"just open the ",[18,346,228],{}," file with your favorite editor and configure it to match your taste ",[54,349,351],{"className":350},[57,77],"environment."," I am using ",[29,354,357],{"href":355,"rel":356},"https:\u002F\u002Fcode.visualstudio.com\u002F",[46],"Visual Studio Code",[14,359,360,361,364,365,84,368,371,372,375,376,65,379,382],{},"Every configuration is self-explanatory, the most common configuration will be the following where you change the ",[18,362,363],{},"PHP_SERVER"," version, ",[18,366,367],{},"HTTPD_SERVER",[18,369,370],{},"MYSQL_SERVER",". As you can see, I am running ",[18,373,374],{},"PHP 7.2"," ",[18,377,378],{},"NGINX stable",[18,380,381],{},"MariaDB 10.3"," Go through the .env file to discover other settings.",[14,384,385,386],{},"Read more about configuring the env file ",[29,387,334],{"href":388,"rel":389},"https:\u002F\u002Fdevilbox.readthedocs.io\u002Fen\u002Flatest\u002Fconfiguration-files\u002Fenv-file.html",[46],[35,391,393],{"id":392},"projects-directory","Projects Directory",[14,395,396,397,400],{},"The devilbox’s projects directory is located inside the devilbox directory ",[18,398,399],{},".\u002Fdevilbox\u002Fdata\u002Fwww"," it should be empty by default. Here is where all your projects will live.",[14,402,403],{},"For each project, you will need to create a folder.",[14,405,406,407],{},"Read more ",[29,408,334],{"href":409,"rel":410},"https:\u002F\u002Fdevilbox.readthedocs.io\u002Fen\u002Flatest\u002Fgetting-started\u002Fdirectory-overview.html#project-directory",[46],[35,412,414],{"id":413},"docroot-directory","Docroot Directory",[14,416,417],{},"The docroot directory is a directory within each project directory from which the webserver will serve the files.",[14,419,420,421,424],{},"By default this directory must be named ",[18,422,423],{},"htdocs",". This can be changed as well but is outside the scope of this tutorial.",[35,426,428],{"id":427},"local-domainsuffix","Local domain suffix",[14,430,431,432,435,436,438,439,442,443,446,447,449,450,452],{},"The default domain suffix (",[18,433,434],{},"TLD_SUFFIX"," variable in ",[18,437,228],{}," file) is ",[18,440,441],{},"loc",". That means that all your projects will be available under the following address: ",[18,444,445],{},"http:\u002F\u002F\u003Cproject-directory>.loc",". This can be changed as well in the ",[18,448,228],{},"file ",[18,451,434],{},"!",[35,454,456],{"id":455},"wordpress-installation","WordPress Installation",[14,458,459],{},"Let us take an example of a WordPress installation from start to the end.",[14,461,462],{},"Open the terminal and run the following:",[98,464,465,470,481,487,493,499,506,514,524],{},[101,466,467],{},[18,468,469],{},"cd devilbox\u002Fdata\u002Fwww",[101,471,472,475,476],{},[18,473,474],{},"mkdir testwp"," to create a directory named ",[54,477,480],{"className":478},[57,479],"markup--li-strong","testwp",[101,482,483,486],{},[18,484,485],{},"cd testwp"," enter the dir we just created",[101,488,489,490],{},"Download WordPress ",[18,491,492],{},"wget [http:\u002F\u002Fwordpress.org\u002Flatest.tar.gz](http:\u002F\u002Fwordpress.org\u002Flatest.tar.gz)",[101,494,495,496],{},"Unzip the archive file by running ",[18,497,498],{},"tar -zxvf latest.tar.gz",[101,500,501,502,505],{},"Run ",[18,503,504],{},"mv wordpress htdocs"," (remember docroot directory?)",[101,507,508,509,513],{},"Open ",[29,510,511],{"href":511,"rel":512},"http:\u002F\u002Ftestwp.loc\u002F",[46]," and you should see the following error.",[101,515,516],{},[18,517,520,523],{"className":518},[160,519],"markup--li-code",[54,521,522],{},"testwp.loc","’s server IP address could not be found.",[18,525],{"className":526},[160,519],[18,528,530],{"className":529},[160,519],[14,531,532],{},"testwp.loc’s server IP address could not be found.",[14,534,535],{},[18,536,538],{"className":537},[160,519],"DNS_PROBE_FINISHED_NXDOMAIN",[98,540,541,544],{},[101,542,543],{},"This happens because we have not added the local host DNS record.",[101,545,546,547,551],{},"If you navigate to ",[29,548,549],{"href":549,"rel":550},"http:\u002F\u002Flocalhost\u002Fvhosts.php",[46]," you should see something like this.",[14,553,554,555,558],{},"The next step is now to add the record in our hosts file. To do so, run ",[18,556,557],{},"sudo nano \u002Fets\u002Fhosts"," to edit it with the nano editor and add the following line",[238,560,563],{"className":561,"code":562,"language":243},[241],"`127.0.0.1 testwp.loc`\n",[18,564,562],{"__ignoreMap":246},[14,566,567,568,571],{},"hit save. Navigate again to ",[29,569,511],{"href":511,"rel":570},[46]," and now you should see the WordPress install page.",[14,573,574,575,578,579,583,584,587],{},"Next step now, is to create a database for WordPress to use. We can do it by using the terminal or by using ",[18,576,577],{},"PHPMyadmin"," which comes with the devilbox. To access phpMyAdmin first navigate to ",[29,580,581],{"href":581,"rel":582},"http:\u002F\u002Flocalhost\u002Findex.php",[46],"> Tools > phpMyAdmin in case it asks for credentials enter ",[18,585,586],{},"root"," as user and leave the password field empty.",[14,589,590,591,33],{},"No create a new database from the sidebar, I will name it ",[18,592,593],{},"wp_testdb",[14,595,596],{},"Once done that head back to WordPress Install Page and continue and add the freshly created database.",[23,598,599],{},[14,600,601,602,605,606,609],{},"Note! For the Database host instead of ",[18,603,604],{},"localhost"," you need to enter ",[18,607,608],{},"mysql"," as this is the name of the MySQL server (container)running in the devilbox environment!",[14,611,612,613],{},"Everything should have run smoothly and you should see the new WordPress site up and running on ",[29,614,616],{"href":511,"rel":615},[46],"http:\u002F\u002Ftestwp.loc",[35,618,620],{"id":619},"conclusion","Conclusion",[14,622,623],{},"The Devilbox is a free and open source project very very easy to set up and run an PHP,Nginx MySQL dev environment and a WordPress installation read following this tutorial should take approximately 10 minutes! I have been using Devilbx for about 1 year now, and I am pretty happy with it and find it very convenient when I am working on a project with PHP 7, and I have to switch to a project running on PHP 5.6 it takes me less than 15seconds! ⏲",[14,625,626],{},"Have you used The Devilbox before? Would you give it a try?",{"title":246,"searchDepth":628,"depth":628,"links":629},2,[630,631,636,637,638,639,640,641,642],{"id":37,"depth":628,"text":38},{"id":95,"depth":628,"text":96,"children":632},[633,635],{"id":127,"depth":634,"text":128},3,{"id":177,"depth":634,"text":178},{"id":249,"depth":628,"text":250},{"id":337,"depth":628,"text":338},{"id":392,"depth":628,"text":393},{"id":413,"depth":628,"text":414},{"id":427,"depth":628,"text":428},{"id":455,"depth":628,"text":456},{"id":619,"depth":628,"text":620},[644],"Article",null,"2019-06-03","I've always been using WAMP as my local dev environment for a quite amount of time while i was using Windows OS, then I switched to Mac OS and used MAMP for a while. That was the case until one of my colleagues recommended devilbox. I gave it a try, and since then I've been using it as my local dev environment.","md","\u002Fimages\u002Fblog\u002Feinstein.jpg","Web development environment using Devilbox",{},true,"\u002Fblog\u002Fweb-development-environment-using-devilbox",6,{"title":5,"description":656,"ogImage":649},"The Devilbox is a modern and highly customisable dockerized PHP stack supporting full LAMP and MEAN and running on all major platforms.","blog\u002Fweb-development-environment-using-devilbox",[659,20,660,661,662,663],"container","docker","nginx","php","WordPress","Y6qKGhjZDBPQdsNBJy1GU6VDGwfkhLx5b256DNdvIOM",[666,670,674,678,682,686,690,694,698,702],{"title":667,"path":668,"categories":669},"Do I Really Need HTTPS? What Happens If My Website Is Not Secure","\u002Fblog\u002Fdo-i-really-need-https",[644],{"title":671,"path":672,"categories":673},"How Much Should a Business Website Cost? What You Are Actually Paying For","\u002Fblog\u002Fhow-much-should-a-business-website-cost",[644],{"title":675,"path":676,"categories":677},"How Often Should I Update My Website? A Realistic Guide for Business Owners","\u002Fblog\u002Fhow-often-should-i-update-my-website",[644],{"title":679,"path":680,"categories":681},"What Is Website Hosting and Does It Really Matter? A Non-Technical Guide","\u002Fblog\u002Fwhat-is-website-hosting-and-does-it-matter",[644],{"title":683,"path":684,"categories":685},"Why Did My Website Get Hacked? Common Causes and What To Do Next","\u002Fblog\u002Fwhy-did-my-website-get-hacked",[644],{"title":687,"path":688,"categories":689},"Why Do Emails From My Website Go to Spam? What Business Owners Need to Check","\u002Fblog\u002Fwhy-do-emails-from-my-website-go-to-spam",[644],{"title":691,"path":692,"categories":693},"Why Does Google Not Show My Business Website? A Plain-English SEO Checklist","\u002Fblog\u002Fwhy-does-google-not-show-my-business-website",[644],{"title":695,"path":696,"categories":697},"Why Does My Contact Form Stop Working? Common Causes and Easy Fixes","\u002Fblog\u002Fwhy-does-my-contact-form-stop-working",[644],{"title":699,"path":700,"categories":701},"Why Does My Site Look Broken on Mobile? The Most Common Non-Technical Causes","\u002Fblog\u002Fwhy-does-my-site-look-broken-on-mobile",[644],{"title":703,"path":704,"categories":705},"Why Is My Website Slow? 7 Simple Things That Usually Cause It","\u002Fblog\u002Fwhy-is-my-website-slow-7-simple-things-that-usually-cause-it",[644],1777992044463]