Deploy a Laravel Breeze app in Railway loading styles correctly
Tags: laravel, deploy, breeze, styles
Published: 2022-12-20 14:40:12

##Table of Contents
    

- 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

![Laravel app styles working correctly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw1k40saggohndv7pc47.png)

#Deploying in Railway
[Railway](railway.app) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmqdh0vsw1n0p74kdl3p.png)

- 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](railway.app) we login with GitHub account.
Then we create a new project by pressing the button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx2fcjxxwanpijj001ci.png)

- Now we configure the repository to the project in railway:

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbrxqmwxdvf5u7zmj0cw.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hv72j0vouljqwylx9v2.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00uz4i6gytv3i3fkzda9.png)



Then we give access to the repository, and save


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3gnll48ir9kh4sm5062.png)

Now can select the app

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wl8nuiwtoitsm05y8wz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgqyb2ncu9hyg5m452mz.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgx6fnbtw0pd58sgcw0e.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwfndbapnsiukkr2chop.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd6syhcai8cqdssf0bpv.png)

- 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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54wgtsjitk5w6ao2boif.png)

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

![Laravel app styles broken](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq724wf3x58k1o3r62yg.png)

# Problem: Blocked resources
The problem is that the request to obtain the style files for the application is blocked, and the view is altered.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj7makfn5007xhsiobhu.png)

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](https://en.wikipedia.org/wiki/Man-in-the-middle_attack), 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](https://laravel.com/docs/9.x/providers), **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.