Laravel 6.x with React and react-router 2020 — Installation to Deployment

Laravel, React, and React Router
Laravel, React, and React Router

This will get you started on getting your first React/Laravel application deployed to your server. We’ll cover everything from installation to deployment. Start by reading the installation instructions on https://laravel.com/docs/6.x#installing-laravel. We’ll cover those details below.

Setting Up Laravel

  • Check that you have the latest version of PHP installed on your computer.
  • It must be >= 7.2.0.
  • Open terminal to get the Laravel installation tool.
  • Type in composer global require laravel/installer
  • Type in laravel to verify installation.
  • Navigate to a directory on your computer where you want to install your project on your terminal.
  • Run the following command: laravel new project_name (replace project_name with your project name).
  • Once complete, cd into your new project.
  • Type the following command: php artisan serve.
  • You’ll get a message like the following if it’s running successfully:
  • Laravel development server started: http://127.0.0.1:8000
  • If it’s not running successfully, then you probably don’t have the correct version of PHP installed. Verify it by typing in php -v inside your terminal and make sure it’s >= 7.2.0.
  • Navigate to http://127.0.0.1:8000 in your browser. Hopefully you see the Laravel startup page.
  • Go back to the terminal and press CTRL+C to quit the process.

Setting Up Laravel with React and react-router

Now that you have Laravel setup, it’s time to setup React for your front-end and react-router for your route management. Start by reading the Laravel/React documentation: https://laravel.com/docs/6.x/frontend

  • Return to your terminal and type in composer require laravel/ui — dev.
  • Run php artisan ui react.
  • Run npm install.
  • Open up your laravel project in you editor (I prefer VS Code).
  • Navigate to routes/web.php
  • You should see something like the following:

Route::get(‘/’, function () {
return view(‘welcome’);
});

  • You need to replace that since our route management will be done with react-router.

Route::view(‘/{path?}’, ‘app’);

  • Create a new view called app.blade.php in resources/views folder.
  • Paste the following code into it:

<!doctype html>
<html lang=”{{ app()->getLocale() }}”>
<head>
<meta charset=”utf-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1">

<! — csrf token →
<meta name=”csrf-token” content=”{{ csrf_token() }}”>
<title>Your Website Title</title>

<! — styles →
<link href=”{{ asset(‘css/app.css’) }}” rel=”stylesheet”>
</head>

<body>
<div id=”app”></div>
<script src=”{{ asset(‘js/app.js’) }}”></script>
</body>
</html>

  • Now that each path is going to be directed to the app.blade.php file, we can start modifying the generated react components.
  • Navigate to resources/js/components/Example.js.
  • Rename Example.js to App.js.
  • Open App.js and change the following:

- function name from Example() to App().

- export default Example to export default App.

- document.getElementById(‘example’) to document.getElementById(‘app’).

- ReactDOM.render(<Example />, document.getElementById(‘example’) to ReactDOM.render(<App />, document.getElementById(‘app’).

  • Open resources/js/app.js and change require(‘./components/Example’) to require(‘./components/App’).
  • Install react-router by navigating to your terminal and typing in npm install react-router-dom. If you’re still serving your application, you may have to press CTRL+C to stop it momentarily.

Testing out your application on your computer

It’s time to test it out and see if it works. We’ll cover two different approaches. The first approach requires you to run a command each time you change something in your code.

  • Open terminal and navigate to your project
  • Type the following: npm run dev
  • After the JavaScript has been compiled, type in php artisan serve and navigate to the address provided to see your application.

The second approach allows you to modify your JavaScript code and have it displayed without running the above two commands each time.

  • Open terminal and navigate to your project
  • Type the following: npm run watch
  • After the JavaScript has been compiled, open another terminal and type in php artisan serve.
  • Two terminal windows will be open for the rest of your development process.
  • If you change any PHP code, you may have to re-run php artisan serve.

Deploying to your server (cPanel)

Deploying the code to your server is pretty straight-forward.

  • Navigate to your project inside your terminal window.
  • Run npm run production. This will compile the code for production use.
  • Open your folders and navigate to your project. When you see it, compress the entire folder.
  • Open FileZilla and upload the compressed file to your desired folder.
  • Go to cPanel in your hosting environment.
  • Open File Manager and navigate to your folder location.
  • Click on it and then select Extract from the tools navigation.
  • In your browser, navigate to http://your-domain.com/project-name/public. This will open up the Laravel/React page.
  • If it’s giving you a storage error, you will have to create a symlink file.
  • Create symlink.php and paste the following code into it:

symlink(‘/home/your_c_panel_username/public_html/your-project-name/storage/app/public’, ‘/home/your_c_panel_username/public_html/your-project-name/public/storage’);

  • Upload the file to your server and navigate to it in your browser. That should fix that storage issue.
  • That’s it, you’re done!

Final Configuration

Most likely you will not want to navigate to http://your-domain.com/project-name/public each time, but will instead want to navigate to just http://your-domain.com.

  • In FileZilla, navigate to your project-name folder.
  • Create a new folder called classes.
  • Grab all of the files and folders besides the public folder and paste them inside your classes folder.
  • Move the classes folder to a folder right below your public_html/ folder. That folder is usually /home/your_c_panel_username/.
  • Navigate back to your public folder and grab all of the files and folders from there. Paste them inside /public_html.
  • Now, open /public_html/index.php.
  • Change require __DIR__.’/../vendor/autoload.php’ to require __DIR__.’/../classes/vendor/autoload.php’
  • Also change $app = require_once __DIR__.’/../bootstrap/app.php’ to $app = require_once __DIR__.’/../classes/bootstrap/app.php’
  • If you created a symlink in the previous step, you will have to update it with the following code:

symlink(‘/home/your_c_panel_username/classes/storage/app/public’, ‘/home/your_c_panel_username/public_html/storage’);

  • Upload the file to your server and navigate to it in your browser. That should fix that storage issue again.
  • That’s it, you’re done!

Final Note

This would be a good time to initialize your git repository if you haven’t done so already.

  • Open GitHub and create a new project.
  • In your terminal, navigate to your project.
  • Type in git init
  • Type in git remote add origin https://github.com/user/repo.git
  • Type in git add .
  • Type in git commit -m ‘initial commit’
  • Type in git push origin master

Pat yourself on the back and get to coding.

Video

I created a video that lists all of the steps above. If something doesn’t make sense in this article, the video should clarify it.

Written by

Author of An Illustrative Introduction to Algorithms. A Software Engineer with a B.S. in Computer Science, a minor in Biology, and a passion for learning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store