Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

codeone's avatar

Laravel 10 + Vite and Codespaces

Hi. I successfully run Laravel 10 on Codespaces with some issues. I use this devcontainer config:

{
	"name": "Existing Docker Compose (Extend)",
	"dockerComposeFile": [
		"../docker-compose.yml"
	],
	"service": "laravel.test",
	"workspaceFolder": "/var/www/html",
	"customizations": {
		"vscode": {
			"extensions": [
			],
			"settings": {}
		}
	},
	"remoteUser": "sail",
	"forwardPorts": [80,5173],
	"postCreateCommand": "chown -R 1000:1000 /var/www/html"
}

I created a "Docker" folder in the root folder and copy the files from /vendor/laravel/sail/runtimes/8.2 folder into the new Docker folder and modify the paths in the docker-compose.yml:

version: '3'
services:
    laravel.test:
        build:
            context: ./Docker/Runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            APP_URL: '${APP_URL}'
            ASSET_URL: '${ASSET_URL}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
        networks:
            - sail
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local

In the .env file I added some new variables based on the docker-compose.yml:

WWWGROUP=1000
WWWUSER=1000

... and add the Github Codespace url later:

APP_URL=https://SOMETHING-80.app.github.dev/
ASSET_URL=https://SOMETHING-80.app.github.dev/

The app is up and running at the Codespaces' url, but there are some issues:

  • All routes begins with "localhost", not the value of the APP_URL
  • Assets not loading (also has localhost in the url-s)

I tried many times to rebuild the container, and cache clear, optimize of course. Any suggestions? Or has anyone deployed the Laravel dev environment under Codespaces?

Thank you!

0 likes
10 replies
LaryAI's avatar
Level 58

To resolve the issues you're facing with Laravel 10, Vite, and Codespaces, you can try the following steps:

  1. Update the APP_URL and ASSET_URL variables in your .env file to use the correct URLs. Make sure to replace SOMETHING-80.app.github.dev with the actual URL of your Codespaces environment.

  2. In your docker-compose.yml file, update the extra_hosts section under the laravel.test service to use the correct hostname. Replace 'host.docker.internal:host-gateway' with 'SOMETHING-80.app.github.dev:host-gateway', where SOMETHING-80.app.github.dev is the actual URL of your Codespaces environment.

  3. Clear the Laravel route cache by running the following command in your Codespaces terminal:

    php artisan route:cache
    
  4. Clear the Laravel configuration cache by running the following command:

    php artisan config:cache
    
  5. Restart your Docker containers by running the following command:

    docker-compose down
    docker-compose up -d
    
  6. If the assets are still not loading, make sure that the asset URLs in your views or templates are using the correct URL. For example, if you have an image tag, make sure the src attribute is set to the correct URL.

If the above steps don't resolve the issues, you can try the following additional troubleshooting steps:

  1. Check the Laravel logs for any error messages or warnings that might provide more information about the issue. You can find the logs in the storage/logs directory of your Laravel project.

  2. Verify that the Vite configuration is set up correctly. Make sure that the Vite configuration file (vite.config.js) is present in your project root and that it specifies the correct asset URLs.

  3. Check if there are any conflicting configurations or settings in your Laravel project that might be causing the issues. Review any custom middleware, service providers, or configuration files that might affect the routing or asset loading.

If you're still experiencing issues after trying the above steps, it would be helpful to provide more details about the specific errors or warnings you're encountering, as well as any relevant code snippets or error messages from the Laravel logs.

1 like
jononz's avatar

I'm not sure about Vite, but with a completely fresh install I was getting localhost links everywhere, despite changing my APP_URL.

I resolved this by adding '*' to my trusted proxies.

Go to your /Middleware/TrustProxies.php modify the $proxies line as follows:

protected $proxies = '*';

This instantly fixed my issue, no other modifications required.

I am however now getting dev Vite issues when using the "sail npm run dev" command. If I manually compile my assets the site works, as soon as I run the "sail npm run dev" command to start watching for changes, I start getting issues again. Might need to configure Vite to work with proxies also. If I figure that out, I'll post the answer.

1 like
goryny4's avatar

Experience the same issue

Any luck anyone?

dbern's avatar

Also looking into making this work, especially the localhost route. Thanks @jononz for the cue, that part is now working :)

For vite, what helped me was deleting the hot file in the public folder generated when running npm run dev. But it keeps regenerating, which is far from optimal. Hot reload will not work, but manual refresh is now taking the changes into account.

Edit:

For the proxy, to avoid trusting proxies in production, I added the constructor and only add * when in dev or local environment

    /**
     * The trusted proxies for this application.
     *
     * @var array<int, string>|string|null
     */
    protected $proxies;

    public function __construct()
    {
       //Only trust in dev.
        if (config('app.env') == 'local' || config('app.env') == 'development') {
            $this->proxies = "*";
        }
    }
2 likes
jononz's avatar

Hey Codespace/Laravel/Vite team, I've had another hack with getting Laravel/Vite working within a Codespace instance. Without Sail by the way, I didn't want to set up Docker inside a Codespace instance, as this seems a bit redundant.

I've come up with the following solution:

https://github.com/JonoHall/Laravel-Vite-Codespaces

This seems to solve all the issues I've come up against with this environment so far. Once the initial install has been completed, the container can be rebuilt/full rebuilt/deleted and recreated and Laravel will start with the correct URL paths, and Vite will open the correct ports (and made public).

Now that I've got it working, and documented the whole process, I actually have to get started on my Laravel project :/

Hopefully anyone who stumbles across will find this useful!

1 like
PeterHowett's avatar

Hi @jononz,

I've followed your guide and it seems to have solved some of the issues I was having. I've now got to the point where my assets are now getting CORS errors. Any Idea what I may have done wrong?

I've got my code on a public repo at

github.com/RetepTT/laravel-11-codespace/tree/inertia

Thanks

jononz's avatar

Hi @peterhowett,

I ran up your code and got it working with the below observations:

The image that your instance is based on doesn't have GH CLI commands installed.

As per my set up, I'm using mcr.microsoft.com/devcontainers/universal:2 which must have it installed by default. Using the GH CLI package I run the line gh codespace ports visibility 5173:public -c $CODESPACE_NAME in the devcontainer.json file. This sets port 5173 to be public when the container is spun up, as well as remain public on all future changes to this port.

To keep this automated with your image, it potentially looks like you can install the GH CLI via these instructions: https://github.com/cli/cli?tab=readme-ov-file#codespaces

You'll then be able to add the gh codespace ports command as per the postAttachCommand.

If you're unable to use GH CLI, you'll have to manually open the Vite port visibility to be public each time you rebuild/restart the container. This must be a public port to stop the CORS errors. Sometimes even just changing your config files can restart the port opening and make the port private again, keep an eye on it if you hit problems.

How to open a port.

Also, small correction on the .env.example file, I'm missing a { which has been since corrected in my repository.

APP_URL=https://{$CODESPACE_NAME}-8000.app.github.dev

2 likes

Please or to participate in this conversation.