From the course: Building a Website with Laravel, React.js, and Inertia

React and Laravel setup - Laravel Tutorial

From the course: Building a Website with Laravel, React.js, and Inertia

Start my 1-month free trial Buy for my team

React and Laravel setup

“

- [Instructor] Let's create the React just front end now. There are two ways we could do that. The first way is to create a new repository just for React. You might have two teams working on the project, one team on the back end and one team on the front end, or you like to keep front end separate from the back end and that's all valid. The second option is to include React inside the Laravel API repository. It all depends on how you plan to enter React and interact with API. Both options are widely used. It's up to you what you choose, but in this project, we will use one single directory for both, the API and the React code. I believe it will be easier to keep track of what we are doing this way. So let's get started with our React front end. We need to install React using Vite. Vite is a build tool and local development server used for front end development. Because Vite already comes installed with Laravel, we don't need to install Vite itself, so that's one less thing to worry about. Let's run NPM create Vite at latest front end dash dash dash dash template react to scaffold our react code inside the front end directory. CD into front end and run NPM install. We are not going to run NPM run dev just yet. We need to install Tailwind CSS to start our React pages first. To do that, we need to run NPM install dash d Tailwind CSS Post CSS autoprefixer in the terminal. We also need to initialize Tailwind's config file by running NPX Tailwind CSS init dash p. To finish the Tailwind setup, we need to configure the template paths in the Tailwind config file. This is telling Tailwind the paths to all of your JavaScript components that will contain Tailwind class names. And finally, let's add the Tailwind directives to the main CSS file at front end SRC index.css. Let's delete everything in this file. This is the default styling that comes with the React Vite package, and instead add the following. There is one more thing I want to do. It's not really important, but I'm used to running my front end on port 3000. So I'm going to change the default one for this project to port 3000 too. To do that, we need to update the package to a JSON file. Make sure you're updating this package.JSON file inside front end because there is another one here in the root of the project. Now we are ready to run NPM run dev to run the build process. And it's working. Yes, the styling is off because we removed the default styles and replaced them with Tailwind CSS. But let's not worry about that just now. This is how React sets up and running. In the following lessons, we will create a simple front end that will allow us to display all blog posts, create a new one, show a post, update post, and delete a post. See you there.

Contents