From bbb08bede69affe6ea2992e019d4eb4ca207e127 Mon Sep 17 00:00:00 2001 From: Kathryn Anne S Tan Date: Sun, 12 May 2024 22:10:02 +0300 Subject: [PATCH 1/2] Initial page for setting vite secrets --- laravel/advanced-guides/vite-secrets.html.md | 69 ++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 laravel/advanced-guides/vite-secrets.html.md diff --git a/laravel/advanced-guides/vite-secrets.html.md b/laravel/advanced-guides/vite-secrets.html.md new file mode 100644 index 0000000000..fbcd3bf529 --- /dev/null +++ b/laravel/advanced-guides/vite-secrets.html.md @@ -0,0 +1,69 @@ +--- +title: "Setting Vite Environment Variables" +layout: framework_docs +objective: How to set up your Dockerfile to build assets that require vite environment variable values. +order: 6 +--- + +Vite makes use of the [dotenv module](https://vitejs.dev/guide/env-and-mode#env-files) to load environment variables during asset bundling. Do you know what this means? + +It means it reads environment variables from .env files. Coincidentally, we don't upload .env values in your Fly Machines. + +Sorry, not sorry! Of course, given you have a Laravel application using vite, using important-secret-env variables, how do you set that up at Fly.io? + +The best way to explain things is to set things up with an example. Let's say, we have this Laravel Echo setup for our application: + +```javascript +/* resources/js/echo.js */ +import Echo from 'laravel-echo'; + +import Pusher from 'pusher-js'; +window.Pusher = Pusher; + +window.Echo = new Echo({ + broadcaster: 'pusher', + key: import.meta.env.VITE_PUSHER_APP_KEY, + cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, + forceTLS: true +}); +``` +Notice it makes use of two environment variables, `VITE_PUSHER_APP_KEY` and `VITE_PUSHER_APP_CLUSTER` imported from `meta.env`. + +Again, Vite, reads its environment variables from the proper .env file, which for Laravel apps, we don't include when deploying at Fly.io. Because of this, those environment variables would be returned as `undefined` in your Laravel app deployed at Fly.io. + +A common error you'll probably see from your console because of this is: +```error +You must pass your app key when you instantiate Pusher. +``` + +## Solution: Build Secrets + Dockerfile Setup +Now, don't fear. This page tackles exactly how to fix this issue. + +All we actually need to do is ask our Dockerfile to create a `.env.production` file on the go using build secrets we pass during `flyctl deploy`. + +So, in the Dockerfile of your Laravel application, preferably under the stage for building your assets add the env variables you need by extracting them from the build-secrets you set: + +```Dockerfile +# Mount secrets, and create a temporary .env.production which is needed when building the assets for vite +# Please RUN this before building your assets for vite! +RUN --mount=type=secret,id=VITE_APP_NAME \ + --mount=type=secret,id=VITE_PUSHER_APP_SECRET \ + --mount=type=secret,id=VITE_PUSHER_APP_KEY \ + --mount=type=secret,id=VITE_PUSHER_APP_CLUSTER \ + echo "VITE_APP_NAME=$(cat /run/secrets/VITE_APP_NAME)" >> .env.production && \ + echo "VITE_PUSHER_APP_KEY=$(cat /run/secrets/VITE_PUSHER_APP_KEY)" >> .env.production && \ + echo "VITE_PUSHER_APP_SECRET=$(cat /run/secrets/VITE_PUSHER_APP_SECRET)" >> .env.production && \ + echo "VITE_PUSHER_APP_CLUSTER=$(cat /run/secrets/VITE_PUSHER_APP_CLUSTER)" >> .env.production +``` + +Finally make sure that you include these build secrets when deploying your app with `fly deploy`: + +``` +fly deploy \ + --build-secret VITE_APP_NAME="Laravel" \ + --build-secret VITE_PUSHER_APP_KEY="my-key" \ + --build-secret VITE_PUSHER_APP_SECRET="my-secret" \ + --build-secret VITE_PUSHER_APP_CLUSTER="my-cluster" +``` + +And that's it! You're assets should now be bundled with your environment variable values! \ No newline at end of file From 61c33365ad6e011bca91fbe80b01cd0b7f6742f4 Mon Sep 17 00:00:00 2001 From: Kathryn Anne S Tan Date: Mon, 13 May 2024 20:41:09 +0300 Subject: [PATCH 2/2] Final fixes --- laravel/advanced-guides/vite-secrets.html.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/laravel/advanced-guides/vite-secrets.html.md b/laravel/advanced-guides/vite-secrets.html.md index fbcd3bf529..f04a22272a 100644 --- a/laravel/advanced-guides/vite-secrets.html.md +++ b/laravel/advanced-guides/vite-secrets.html.md @@ -1,17 +1,14 @@ --- title: "Setting Vite Environment Variables" layout: framework_docs -objective: How to set up your Dockerfile to build assets that require vite environment variable values. +objective: How to set up your Dockerfile to build assets that require Vite environment variable values. order: 6 --- +Recent Laravel framework versions [make use of Vite](https://laravel.com/docs/11.x/vite) to bundle CSS and JavaScript files for production use. -Vite makes use of the [dotenv module](https://vitejs.dev/guide/env-and-mode#env-files) to load environment variables during asset bundling. Do you know what this means? +Vite makes use of the [dotenv module](https://vitejs.dev/guide/env-and-mode#env-files) to load environment variables during asset bundling. It [exposes proper](https://laravel.com/docs/11.x/broadcasting#client-pusher-channels) environment variables from [specific .env files](https://vitejs.dev/guide/env-and-mode.html#env-files). Coincidentally however, we [_don't_ include](https://github.com/fly-apps/dockerfile-laravel/blob/e7e7285698aaedf3cde77470c38b65de0f34af77/resources/views/fly/dockerignore.blade.php#L11) .env files for Laravel apps deployed in Fly.io. -It means it reads environment variables from .env files. Coincidentally, we don't upload .env values in your Fly Machines. - -Sorry, not sorry! Of course, given you have a Laravel application using vite, using important-secret-env variables, how do you set that up at Fly.io? - -The best way to explain things is to set things up with an example. Let's say, we have this Laravel Echo setup for our application: +Of course, given you have a Laravel application using Vite that uses important-secret-env variables, how do you set that up at Fly.io? For example, let's say, we have this JavaScript file that sets up [Laravel Echo](https://laravel.com/docs/11.x/broadcasting#client-pusher-channels) in the client to connect to our Laravel app's [Pusher Channel driver](https://laravel.com/docs/11.x/broadcasting#pusher-channels): ```javascript /* resources/js/echo.js */ @@ -39,9 +36,9 @@ You must pass your app key when you instantiate Pusher. ## Solution: Build Secrets + Dockerfile Setup Now, don't fear. This page tackles exactly how to fix this issue. -All we actually need to do is ask our Dockerfile to create a `.env.production` file on the go using build secrets we pass during `flyctl deploy`. +All we actually need to do is ask our Dockerfile to create a `.env.production` file on the go using [build secrets](https://fly.io/docs/reference/build-secrets/) we pass during `flyctl deploy`. Take note! This `.env.production` file needs to be created before bundling your assets take place! -So, in the Dockerfile of your Laravel application, preferably under the stage for building your assets add the env variables you need by extracting them from the build-secrets you set: +So, in the Dockerfile of your Laravel application, _before_ [building your assets](https://github.com/fly-apps/dockerfile-laravel/blob/e7e7285698aaedf3cde77470c38b65de0f34af77/resources/views/dockerfile.blade.php#L55), add the env variables you need by extracting them from the [build secrets you mount](https://fly.io/docs/reference/build-secrets/#mounting-secrets), then writing them to a `.env.production` file: ```Dockerfile # Mount secrets, and create a temporary .env.production which is needed when building the assets for vite @@ -56,7 +53,7 @@ RUN --mount=type=secret,id=VITE_APP_NAME \ echo "VITE_PUSHER_APP_CLUSTER=$(cat /run/secrets/VITE_PUSHER_APP_CLUSTER)" >> .env.production ``` -Finally make sure that you include these build secrets when deploying your app with `fly deploy`: +Finally make sure that you [include these build secrets](https://fly.io/docs/reference/build-secrets/#secret-values) every time you deploy your app with `fly deploy`: ``` fly deploy \