Preview
Video Player
00:00
00:00
Setup Your Local Development Environment
7:41Most developers prefer to build applications locally, on their own computers, rather than on hosted servers. Working locally allows you to work more quickly because you don’t have to wait for your changes to be saved to a remote server and you don’t have to worry about issues like internet connectivity.
[MUSIC]
0:00
Hello and welcome.
0:04
I'm Alena Holligan, a PHP teacher here
at Treehouse and long time developer.
0:06
Most developers prefer to
build applications locally
0:11
on their own computers rather
than on a hosted server.
0:14
Working locally allows you to work more
quickly because you don't have to wait for
0:18
changes to be saved to a remote server and
0:22
you don't have to worry about
issues like internet connectivity.
0:25
Working with files locally also
allows tighter integration
0:29
with development tools.
0:33
In addition, one of the best things
about programming as a career
0:36
is the ability to work from anywhere.
0:39
While all these reasons are good,
the most important reason for
0:43
having a local development
environment is you should
0:46
never be working directly
on a production server.
0:49
Always test your code before it goes live.
0:52
To make use of these advantages we need to
set up a local development environment.
0:56
This means installing the programs
we need for our local computer
1:01
to work as a web server,
namely Apache, MySQL, and PHP.
1:05
There are many different ways to set
up a local development environment.
1:10
Most involve at least some
use of the command line and
1:15
can be pretty scary if you
don't know what you're doing.
1:18
I'll be showing you a quick and
simple method,
1:22
which will allow even complete beginners
to get up and running within minutes.
1:25
Make sure you check out the notes for
more resources and advanced options.
1:29
Let's get started.
1:34
In our web browser, let's search for MAMP.
1:36
The first one is MAMP and
MAMP PRO at mamp.info.
1:39
We'll go to Downloads and
then chose Download.
1:43
This may take a little bit, depending on
how fast your Internet connection is.
1:48
Once the file has downloaded,
open the installer, and
1:54
it will guide you through the necessary
steps to install the software.
1:56
Read and agree to the terms,
and then install.
2:02
It may ask you for
your password at this point.
2:09
So type in your password.
2:12
This installer installs two folders,
MAMP and MAMP PRO.
2:16
Do not rename the MAMP folder or
move it out of the applications folder or
2:20
your projects won't work.
2:24
MAMP and
MAMP PRO have been installed successfully.
2:27
You may close the installer.
2:29
Go to your applications folder where
you will see MAMP and MAMP PRO.
2:32
If wanna learn more about MAMP PRO,
check out the notes.
2:37
For right now, simply open the MAMP
application which is in the MAMP
2:40
folder and choose Launch MAMP,
then Start Servers.
2:43
This is where the magic happens and
turns our computer into a web server.
2:47
This will automatically
open the web start page,
2:52
which includes basic information about
our new server, which is now running.
2:54
If we click php info,
we will see the current php configuration.
2:59
There are also links to administer our
MySQL databases using phpMyAdmin or
3:05
phpLiteAdmin.
3:10
If you click My Website,
3:12
you will see a page that says Index of /,
and nothing else.
3:13
This is because we don't have any
files set up, so let's fix that.
3:17
Open up your text editor and
create a new file.
3:21
Here we're going to put Test and
then Save.
3:24
We'll choose Applications,
MAMP, and finally htdocs.
3:29
This is where MAMP stores
our web files by default.
3:36
Type index.php as out filename and
choose Save.
3:40
Now when we go back into the web browser
and hit Refresh, we'll see Test.
3:46
If I go back into MAMP and
Stop Servers, and
3:51
then go back into the browser and
refresh, we'll see an error.
3:54
That's because our server
is no longer running.
3:57
Make sure you Start Servers before trying
to view your website in a browser.
4:00
Congratulations.
4:05
Technically, this is all we need to do.
4:07
However, I want to show you two
configuration steps that will make our
4:09
workflow a little easier.
4:12
First you'll notice in
the address bar :8888.
4:15
By default, MAMP uses port 8888 for web.
4:19
If you remove the port number,
you'll receive an error.
4:23
Normally when you visit a website
you don't need to add a port number.
4:26
We can make MAMP work more
like a regular web server
4:30
by changing one of
the settings in preferences.
4:33
If you'd like to know more about ports and
how they work, check out the notes.
4:35
Let's go back to MAMP and
open Preferences.
4:40
Go to the Ports tab and choose
Set Web & My SQL ports to 80 & 3306.
4:42
These are the standard web ports.
4:49
After saying OK, our servers will restart,
they may ask you for
4:52
a password again and now when we go
back into our browser and refresh,
4:56
you'll see that Test Is directly on local
host without the port numbers 8888.
5:00
Finally, most people find it better
to work in the documents folder,
5:06
usually within a sites folder, and
then separate folders for each project.
5:10
So let's set that up.
5:14
First we'll go back into our text editor
and save our file in the new location.
5:16
We'll add Documents here just so
that we know that it's working.
5:20
And File, Save As,
we'll choose Documents, Sites,
5:24
and then add a new folder named test site.
5:29
We'll keep our name as index.php and
press Save.
5:34
Now we go back into MAMP and
choose Preferences again.
5:38
This time we'll go into our web server.
5:42
Next to Document Root you'll see a folder.
5:44
We click that, we can choose
the root folder for our website.
5:47
Choose Documents, Sites,
Test Sites, and then Select.
5:50
Choose OK, and
our server will restart again.
5:57
Now when we go back to our browser and
refresh, we'll see Test: Documents.
6:01
Now we know that it is looking in
the new location for our website.
6:07
I have one final tip for you.
6:10
Most likely you have more
than one project even now.
6:13
And you'll definitely be adding
more projects in the future.
6:15
Although MAMP PRO is designed
to accommodate this,
6:19
we can work on multiple
projects with the free version.
6:21
When you're ready to work on another
project go into Preferences and
6:25
change the root path.
6:28
Let's walk through what this looks like.
6:29
Go into your text editor and
change your file to say Test Site 2.
6:31
Now let's save this file under Documents,
Sites,
6:36
create a new folder named test site 2.
6:41
And save our index file here.
6:46
Finally, go back into MAMP, Preferences,
Web Server and change the document root.
6:48
We'll choose Documents, Sites,
Test Site 2, and hit Select.
6:55
Then click OK.
7:00
Now when we go back into our web browser
and refresh the page we see Test Site 2.
7:05
To switch between these projects,
we simply change the root path each time.
7:11
While this approach works, you can only
have one project running at a time.
7:16
Check the notes to learn how MAMP PRO
handles this, as well as other features.
7:20
Now that you have your local
dev environment set up,
7:24
you're ready to code anywhere.
7:27
A laptop might come in handy too.
7:28
Remember to check out the notes,
where you'll find a lot more resources and
7:32
advanced options.
7:36
Until next time,
maybe I'll see you at the beach!
7:37