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.

1// /etc/hosts
2
3194.213.43.23 api.customdomain.test
4194.213.43.23 www.customdomain.test

Configure Homestead

 1// Homestead.yaml
 2sites:
 3    - map: api.customdomain.test
 4      to: "/var/www/customdomain-api/public"
 5    - map: www.customdomain.test
 6      to: "/var/www/customdomain-ui/public"
 7
 8ports:
 9    - send: 30000
10      to: 3000

Configuring Laravel Application

1// .env
2APP_URL=http://api.customdomain.test
3FRONTEND_URL=http://www.customdomain.test:3000
4SANCTUM_STATEFUL_DOMAINS=www.customdomain.test:3000
5SESSION_DOMAIN=.customdomain.test

Configuring ReactJS Application

1// .env.local
2NEXT_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:

1// /var/www/customdomain-ui
2
3npm 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.

Important Notes

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.

Testing API

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.