Benvenuti and welcome! This write-up is my detailed experience in practicing my skill stack, showing how I do things, and maybe even a tutorial for other devs wanting to figure things out themselves!
This first part will be actually building our application right from the start! Normally, I work in a custom PHP framework that I built and have toned together over the years. However I know Laravel is very popular PHP framework. I also have not done much front-end work (my new portfolio website was a new learning experience using Gatsby.js + React!) so this project will help me more with React as well. I will be practicing using the
git command line instead of the UI GitHub Desktop, as well as trying to see if I can figure out some more common devops practices like unit testing or building pipelines! Cominciamo! Let’s get started!
I’m currently developing on my Macbook Pro running Big Sur. I already have the popular Homebrew installed that will give us a Linux like experience in being able to install packages from the terminal. I also am using a customized iTerm that I learned from this YouTube video:
Also, make sure PHP and npm are installed on your system as well. The first step is to
cd into the directory we want to start our project. I have an external drive mounted where I store my projects for GitHub, so I migrated into that directory. Since we are installing a laravel app, we will need the
composer manager. I do not have that installed, so I just need to use Homebrew like so:
brew install composer, wait for it to finish and now I can run
composer and see it’s working!
Now we can create our app. Looking at the official Laravel docs, we can run
composer create-project laravel/laravel react-devops-showcase cd react-devops-showcase git init composer require laravel/ui php artisan ui react npm install && npm run dev code . php artisan serve
These commands, from top to bottom:
- create the new laravel project named
react-devops-showcasefrom the laravel codebase
cdinto the new project directory
- init a
- require the new
- build the ui framework using
- use npm to init some modules and build the css to /public
- Launch VS Code in this directory
- serve a development version of our app to see if it’s working!
I also went ahead and edited the name and description of the
composer.json file to be more project specific.
At this point, I am going to do a
git commit and
git push to get the initial framework into the repo.
Building the App
With our framework created, now I am going to start building some initial react components, located in
We need to make some changes to the structure to support a single page React app.
- First, in
/routes/web.phpwe need to add the route:
- Next rename the
- In that
app.blade.phphave a div with the id
appto load our react app
- Now in
/resources/jswe can build components and Have an
Appcomponent that renders into the div we made above
I also installed
react-bootstrap to give me some bootstrap components and the react router.
npm install react-router-dom react-bootstrap bootstrap
And I went ahead and built some components and pages. Now I have a
home page and a
test page that follow the same layout, but load two silightly different modules.
You can see that code here.
In Part 2, I will start building a backend / api to query with React and then do some unit testing of the API and the front-end components.