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 PHP code, you will 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.
Hi there, I enjoy reading through your article post. Thank you for sharing.
ReplyDeleteReact JS Online training
React JS training in hyderabad
Tecocraft Ltd Is Mobile App Development Company in UK. and solutions for customers willing to grow their business and want to provide a great user experience to end users.
ReplyDeleteGreat blog.
ReplyDeleteThe details that you shared regarding React Native Application and development program. The details and resources that you mentioned about application development with coding will help everyone to understand about react related mobile app development. I was searching for react native app development company and got his blog.
Thanks for sharing such a great blog.
Great post.
ReplyDeletehttp://forum.yealink.com/forum/member.php?action=profile&uid=128657
Great post.
ReplyDeletehttps://forum.freeadvice.com/members/charlieferdinand.705313/#about
Great post.
ReplyDeletehttps://www.goodreads.com/user/show/122454040-jerryle
thank u! this worked for me, I started with laravel and react and is a awful setting in my opinion
ReplyDeleteThanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great information. We are technology/news/smartphone company, If you want to read such useful news then, Visit us: https://techmie.com/
ReplyDeleteGet a free quote for laravel web development requirements from a top laravel development company in Australia, UK, USA, Delhi, Noida, Gurugram, Ghaziabad, Faridabad.
ReplyDeleteLaravel development company
Your blog post is very unique and interesting. Thanks for sharing.
ReplyDeleteRemote Laravel developers in the USA
I read your blog that has good information. Thank you for sharing useful and informative content. I really enjoyed to read out your blog.
ReplyDeleteFor More Information click Below:
Reactjs App Development Services
This article is a great article that I have seen in my programming career so far, it helps me a lot in set up laravel time to all new laravel interns, and will continue to do so in the future.
ReplyDeletewebsite development company in Surat Gujarat
Thanks for sharing great information.
ReplyDeleteLearn Quran Online
I read your article and interesting information.
ReplyDeleteKeep it up
Gutter Cleaning Sydney
Computer network is a group of computers connected to each other electronically. That means the computer can talk to each other, every computer in the router-help send and receive information.
ReplyDeleteI am getting white screen
ReplyDeleteIam so thrilled because of finding your alluring website here.Actually i was searching for Manage Web Hosting & C-Panel.Your blog is so astounding and informative too..Iam very happy to find such a creative blog. Iam also find another one by mistake while am searching the same topicMobile Marketing.Thank you soo much.
ReplyDeleteReact Native App Development
ReplyDeleteSuch a great information provided by author .Thanks for sharing great information.
ReplyDeleteBest react native app development services
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.thanks for your information really good and very nice
ReplyDeletehttps://www.minds.com/xfactorfederalinfo/
me know if this okay with you. Thanks a lot!
ReplyDeleteoracle bpmonline course
angular jsonline course
sql server dbaonline course
oracle golden gateonline course
Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article.
ReplyDeleteReact JS Training in Chennai
React JS Course in Chennai
After doing all this learning let do some practical by Hacking use smartphone/laptop
ReplyDeleteDo complete hacking & do some practical for beginners to advanced levels users :- Click Here
Checkout Awesome content !!
ReplyDeleteHi,
Thanks for sharing this.
Being an expert in Laravel Website Development, I believe Laravel is many developers' 1st choice because Laravel website development simplifies most project tasks, saving time and efforts. It is a powerful tool that meets specific needs and constructs an exceptional CMS or Web application.
Really impressed with the article you provided. It was quite informative, effective, and easy to use. Chat apps have certainly grown to the top today and we, as Suffescom Solutions, are also working in the same niche. Be it clubhouse clone or any other cloning platform, we are the best entertainment app, clone providers. We use first-level interference to provide the best React Slack Clonechat App.
ReplyDeleteI really enjoyed reading your blog. It was very well written and easy to understand. Unlike other blogs that I have read which are actually not very good. Thank you so much!
ReplyDeleteCasino Game Development Company
Thanks for share your blog information.Waiting your new blog!
ReplyDeletemobile app Development service in mohali
Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article. Laravel & React Development Services in USA
ReplyDeleteSingle Band Router provides high internet speed and high data security with more efficient data transmission security. It has two external high-gain omnidirectional antennas and a wireless transmission rate of up to 300Mbps. It has the characteristics of strong penetrating power and wide coverage.
ReplyDeleteGrandstream GSC3506 SIP speaker offers modern features to address the public through announcements. It offers crystal clear HD audio, SIP paging, multicast paging, and a 30-Watt HD speaker. It is the ideal speaker for any organization. Contact Cloud Infotech to get the best device at the most affordable price.
ReplyDeleteThanks for sharing! I'm also writing an article about Reactjs vs Laravel. Please visit.
ReplyDeleteI have been following your post for last few days, and I got very important information from your post. Now I learned react native course and searched for new information and I found it here. It really helped me gain knowledge. Thanks for sharing this post.
ReplyDeleteThank you for your informative blog; it's lovely and useful. Thanks for sharing this great post; I will definitely forward it along to my friends.
ReplyDeleteBest Software Development Company In Mohali
Mobile App Development Company
Thanks for posting useful information.You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..
ReplyDeleteWeb and app development Company
This comment has been removed by the author.
ReplyDeleteHey Author This is a really very good article about React native . I am also a student best react native course in kolkata. an React native is an excellent career to choose. I appreciate you sharing this amazing article with us . this article was very helpful to me.
ReplyDeleteThank you for sharing this information. Awe-inspiring blog and article That is very advantageous to us. One of the finest Best Software Development Company In Mohali, India, is recognised as being us. Our professionals provide a broad range of development services, such as Facebook ads, mobile app development, digital marketing, SEO, and website design. We have more than 12 years of experience in the IT industry.
ReplyDeleteReally Best Article
ReplyDeleteHire React Native Developers
Laravel with our team of talented developers at Connect Infosoft Technologies. Hire Laravel Developers in India skilled professionals are well-versed in the latest trends and best practices, ensuring exceptional results that boost your online presence.
ReplyDeleteReally awesome article
ReplyDeleteReact vs React Native
Thanks for sharing this informative article on Laravel 6.x with React and react-router. If you want to Hire Backend Developers for your project. Please visit us.
ReplyDeleteThanks for sharing best information on Laravel and React.
ReplyDeleteCheck Metro Route on GoMetro
I am very thankfull to the author for sharing a wonderfull post.
ReplyDeleteHire Dedicated WordPress Developer
Hi!
ReplyDeleteA great place I really like your blog it was so unique, check out my blog is also related:
SEO Services
Informative blog, Thanks for sharing.
ReplyDeleteChoose one of the best node js development agency based on usa and India.
Hire ReactJS Developers in India to build high performing web aplications with ReactJS.
This was really helpful. I'll definitely try implementing these tips.
ReplyDeletehire Remote mobile app developers
We're assembling the ideal remote front-end web development team! We want you on board if you can handle problems creatively and have an excellent eye for design.
ReplyDeletehire remote front end web developers
I really liked the article and easy to read and understand. Many thanks for sharing this post. Also share blogs about React Js Development Company in India. You can get information about React JS Development by clicking on our given link.
ReplyDeleteNice blog. You have posted very informative blog .
ReplyDeleteFor Reactjs Development Services visit infowindtech website
Nice Post!!
ReplyDeletePlease look here at Hire Laravel Developer India