{"id":140,"date":"2023-01-16T12:59:16","date_gmt":"2023-01-16T12:59:16","guid":{"rendered":"https:\/\/mrzebra.co.uk\/code\/?p=140"},"modified":"2024-12-03T15:15:03","modified_gmt":"2024-12-03T15:15:03","slug":"how-to-use-laravel-vite-from-docker","status":"publish","type":"post","link":"https:\/\/zebra-north.com\/code\/2023\/01\/16\/how-to-use-laravel-vite-from-docker\/","title":{"rendered":"How to use Laravel + Vite from Docker"},"content":{"rendered":"\n<p>If you are running Laravel inside a Docker container and using Vite for Javascript\/CSS bundling, you may find that the files fail to load when you view your website.  You instead see one of the following errors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>GET http:\/\/127.0.0.1:5173\/@vite\/client net::ERR_CONNECTION_REFUSED<\/strong><\/mark><\/li>\n\n\n\n<li><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>GET http:\/\/0.0.0.0:5173\/@vite\/client net::ERR_ADDRESS_INVALID<\/strong><\/mark><\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>The problem occurs because by default Vite binds to the localhost address 127.0.0.1, meaning that it can only be accessed from inside the Docker container.  To allow access from outside the container you can bind it to the &#8216;any&#8217; IP address of 0.0.0.0 by using the <code>server.host<\/code> configuration variable.  This, however, causes the website to try to connect to 0.0.0.0, which is not valid.  To tell the front end to use 127.0.0.1, you must set the <code>server.hmr.host<\/code> variable.<\/p>\n\n\n\n<p>The entire <code>vite.config.js<\/code> file is shown below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { defineConfig } from &#039;vite&#039;;\nimport laravel from &#039;laravel-vite-plugin&#039;;\nimport vue from &#039;@vitejs\/plugin-vue&#039;;\n\nexport default defineConfig({\n    server: {\n        host: &#039;0.0.0.0&#039;,\n        port: 5173,\n        hmr: {\n            host: &#039;127.0.0.1&#039;,\n        },\n    },\n    plugins: [\n        vue(),\n        laravel({\n            input: [&#039;resources\/css\/app.css&#039;, &#039;resources\/js\/app.js&#039;],\n            refresh: true,\n        }),\n    ],\n});\n<\/code><\/pre>\n\n\n\n<p>Remember that you will also need to expose the port in your <code>docker-compose.yml<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-yaml\">version: &quot;3.8&quot;\nname: my-laravel-project\nservices:\n  web-server:\n    ports:\n      - &quot;80:80&quot;\n      - &quot;5173:5173&quot;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Empty Reply from Server<\/h2>\n\n\n\n<p>If the server returns an empty reply then this is likely due to IPv6. In Windows 11, <code>localhost<\/code> resolves to <code>::1<\/code>. The Vite server is bound to <code>127.0.0.1<\/code>, and will not respond to connections to <code>::1<\/code>.<\/p>\n\n\n\n<p>To work around this, avoid using <code>localhost<\/code> and instead use <code>127.0.0.1<\/code> explicitly in all configuration files, and use <code>http:\/\/127.0.0.1\/<\/code> in your browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are running Laravel inside a Docker container and using Vite for Javascript\/CSS bundling, you may find that the files fail to load when you view your website. You instead see one of the following errors:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[13,11,18],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-php","tag-docker","tag-laravel","tag-vite"],"_links":{"self":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":6,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/140\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}