Deploy a Laravel Breeze app in Railway loading styles correctly

Lucho Quiruga — Tue, 20 Dec 2022 14:40:12 +0000

Introduction
Create Laravel app + Laravel Breeze
Deploying in Railway
Problem: Blocked resources
Mixed Content
Solution
Conclusion

Introduction

In some cases the deployment of a Laravel Breeze app to some PAAS, in this case Railway, can have some style problems in the application view. This problem is related to the concept of mixed content, which we will see later on.

We will see why this problem is generated in production and how to solve it.

Note: It can be useful to understand the cause and solution of the problem, because this problem can occur also with applications developed with other technology, or deployed on other platforms.

Create Laravel app + Laravel Breeze

Now let's create a Laravel application and then include Laravel Breeze. The next steps follow the guides of the official documentation of Laravel.

composer create-project laravel/laravel example-app

php artisan breeze:install

php artisan migrate
npm install
npm run dev

In 127.0.0.1 the application looks like this

Deploying in Railway

Railway is an infrastructure platform where you can provision infrastructure, and allows us to deploy our applications and databases for free (with limitations).

Let's see how to make the deploy for our example.

Create a repository on GitHub and push the app into it.

We configure the repository to our local project and push the app, following GitHub steps:

echo "# LaravelExample" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/LuchoQuiru/LaravelExample.git
git push -u origin main

In Railway we login with GitHub account. Then we create a new project by pressing the button

Now we configure the repository to the project in railway:

Press "+ new" button and select "GitHub repo"

Then we give access to the repository, and save

Now can select the app

Now set up a database, in this case Postgres
Again press + new button -> Database -> add Postgres

A postgres database was created, from which we obtain the following variables for connecting to the database

Then, we set the environment variables for the application by pressing the raw editor button, , and copying the contents of the application .env file

In the configuration tab, in the Deploy section we add the following start command: composer install && php artisan breeze:install && php artisan migrate --force && npm install && php artisan serve --host=0.0.0.0 --port=$PORT

So far the deployment of the application should be done. But it looks like this

Problem: Blocked resources

The problem is that the request to obtain the style files for the application is blocked, and the view is altered.

The message that we obtain in console is:
Mixed Content: The page at https://production.up.railway.app/login was loaded over HTTPS, but requested an insecure stylesheet http://production.up.railway.app/build/assets/app.e87db8d1.css. This request has been blocked; the content must be served over HTTPS.

Mixed Content

What is Mixed Content
Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection.

In our Laravel example the stylesheets are locked because of this.

Requesting sub-resources using the insecure HTTP protocol weakens the security of the entire site, as these requests are vulnerable to en-route attacks also known as man-in-the-middle, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties.

As a consequence and for security reasons, the browser blocks mixed content.

Solution

One way to avoid mixed content is to force the laravel application to require resources over a secure https connection.

In laravel we can solve it from the Service Provider, inside the boot() method

Service providers are the central place of all Laravel application bootstrapping.

Then we tell Laravel to force all routes to be https if we are in the production context.

if(config('app.env') === 'production') {
            \URL::forceScheme('https');
}

In this way we eliminate mixed content as all resources are now requested over a secure https connection.

Conclusion

Now the browser allows us to obtain all the resources and we can see the application and its styles working correctly.

DEV Community: Lucho Quiruga