Getting Next.js 13, Laravel 10, Sanctum, Homestead and custom domain up and running
The Laravel team has done a phenomenal job at doing integrations with Next.js, Laravel and Sanctum, however all the documentation I've seen thus far are using localhost and Laravel Sail. This guide is for someone wanting to use Homestead and a custom domain for local development.
This will help you resolve the following error:
Error: Request failed with status code 419.
This guide assumes you are installing a fresh application by following the installation procedures here Breeze & Next.js / API.
Let's assume you have the following two domains
- api.customdomain.test -> Laravel Application in Homestead
- www.customdomain.test -> Next.js Application on your machine
Configuring /etc/hosts file
First let's make sure that the two domains are pointed at the right place.
// /etc/hosts 188.8.131.52 api.customdomain.test 184.108.40.206 www.customdomain.test
// Homestead.yaml sites: - map: api.customdomain.test to: "/var/www/customdomain-api/public" - map: www.customdomain.test to: "/var/www/customdomain-ui/public" ports: - send: 30000 to: 3000
Configuring Laravel Application
// .env APP_URL=http://api.customdomain.test FRONTEND_URL=http://www.customdomain.test:3000 SANCTUM_STATEFUL_DOMAINS=www.customdomain.test:3000 SESSION_DOMAIN=.customdomain.test
Configuring ReactJS Application
// .env.local NEXT_PUBLIC_BACKEND_URL=http://api.customdomain.test
Running the application
Assuming Homestead is running, you can go to your
customdomain-ui application and run the following:
// /var/www/customdomain-ui npm run dev
That will display a message similar to this one:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Double check the port and compare it against your Laravel Application .env file for the variables we updated above, if they do not match update them.
Once this is complete you should be able to access your site by going to
http://www.customdomain.test:3000, and should it should work correctly.
Clear your browser
If you did all this and still get errors, it is important to clear your browser cache and cookies, as previous data will affect current results. You can try using incognito or a different browser to re-test everything.
Getting Fast Refresh Working
Fast Refresh will give you instant feedback on edits made to your components, unfortunately because we are using Homestead and your application is mounted to the VM it may not properly communicate the file change events. You can fix this by enabling a file poll watcher which you can install by going here(backup), original source by Mikko Tikkanen which can be found here.
If you would like to start developing and testing through Postman you can follow this great guide by Balaji Dharma. It will allow you to test the API end point while authenticated which you can build on top off.