React / DevOps Showcase (Part 1)

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!

Environment Setup

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!

App Setup

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-showcase from the laravel codebase
• cd into the new project directory
• init a git repository
• require the new laravel ui framework
• build the ui framework using react
• 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 /resources/js/components

We need to make some changes to the structure to support a single page React app.

• First, in /routes/web.php we need to add the route: Route::view('/{path?}', 'app');
• Next rename the welcome.blade.php to app.blade.php in /resources/views
• In that app.blade.php have a div with the id app to load our react app
• Now in /resources/js we can build components and Have an App component 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.