Creating Your First Site with Nitro

Now that we have Nitro installed, we are ready to cre­ate our first Craft host­ed with Nitro. For this video, we’ll focus on set­ting up a new site with Nitro. In the next video we’ll look at migrat­ing an exist­ing project.

Nitro is a glob­al com­mand, so we do not install any­thing inside of our project. That means we can pick where we want to store our project files on our local com­put­er and then ini­tial­ize a new project there using Nitro.

The com­mand we will use for this exam­ple is nitro create.

I do this in the training direc­to­ry in my user direc­to­ry on my com­put­er. This is where I keep all of the projects I use to cre­ate these train­ing videos and write arti­cles. For my actu­al work where I cre­ate projects for myself or for clients, I use the projects direc­to­ry in my user directory.

nitro create

The nitro create com­mand that we will use does two things: it cre­ates a new Craft project (like you would with composer create-project) and it adds that project to Nitro (like you would do in an exist­ing project with nitro add — more on that later).

So, find a place on your file sys­tem where you want to install a fresh copy of Nitro, and let’s get started.

➜ cd ~/training

With the project direc­to­ry cre­at­ed, we can now run nitro create. This com­mand takes one argu­ment, which is the name of the project. Nitro will cre­ate the direc­to­ry for the project based on the name and name the host­name based on the name, too.

➜ nitro create learnnitro 

This down­loads the Craft appli­ca­tion begins the set­up process. This an inter­ac­tive set­up process, so we will be asked to con­firm or input some settings. 

The first one is the host­name. It will default to the name of the direc­to­ry and then the .nitro local TLD. Hit Enter to accept as it is. Any­thing in the square brack­ets is the default input if we just hit Enter and do not spec­i­fy any­thing custom.

The website’s web­root will default to web, which we want to keep since that is the default direc­to­ry name in a new Craft installation.

The next step is to choose the PHP ver­sion. My advice here is to choose the PHP ver­sion that is the same as run­ning in pro­duc­tion. Let’s choose 7.4.

We do need a data­base for this project because Craft requires one, so we will choose Y, and we will choose the data­base engine for MySQL.

In Nitro, I typ­i­cal­ly name the data­base after the host­name and project name it’s easy to find the data­base I need. So we will input learnnitro  as the name of the database.

Now Nitro will update the project .env file so it has the cre­den­tials needs to con­nect to the database.

At this point, Com­pos­er will kick in and down­load the depen­den­cies for the Craft project. This process is sim­i­lar to the part where we run composer create-project craftcms/cms when set­ting up a new project with­out Nitro.

Now Nitro spins up the Dock­er con­tain­ers and makes sure every­thing is work­ing as expected.

We will be Wprompt­ed for your admin pass­word so Nitro can update the hosts file on your com­put­er. On macOS, this is locat­ed in /etc/hosts.

That is it! The con­tain­ers are running! 

Our next step is to run craft setup and get the site con­fig­ured. For this step, we want to inter­act with Craft through the con­tain­er. For that rea­son, we will prepend nitro to our craft commands.

➜ nitro craft setup

Choose the project we cre­ate by inputting the num­ber and then fol­low the prompts to set up Craft.

1. We will choose MySQL since that is the data­base serv­er we set up for this project.
2. The data­base serv­er is mysql‑8.0 – 3307.database.nitro
3. Input the port num­ber, which is 3306, inter­nal­ly when accessed via the Craft application.
4. The user­name and pass­word for the data­base are ​“nitro” and ​“nitro”.
5. The name of the data­base is ​“learn­ni­tro”.

It will now run the instal­la­tion process and pop­u­late the data­base with the default data need­ed to start a new Craft project!

Let’s fire up the brows­er and see what is there. Go to https://learnnitro.nitro to see the site!