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
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.
Top comments (0)