Laravel MIX_ variables don't work in production - laravel

Laravel allows you to acess .env variables in javascript by prefixing the app with MIX_, my file looks like this:
APP_NAME="My app"
MIX_APP_NAME="${APP_NAME}"
This works in development, however when I build the app for production the app name shows up as undefined. Is there some way to get around this issue?

Related

ChunkLoadError after deployment to Production ( Vapor + AWS ) [Laravel & Vuejs]

I have developed a small appointment system using Laravel and Vue.js. For deployment purpose, this system has been deployed using Vapor(https://vapor.laravel.com/) and AWS. While the deployment has been successful i.e I can see the login page, login successfully and even perform some functions. However most of the navigation links are not working. The errors that I see in browser console : ChunkLoadError: Loading chunk XY failed at path https://hosturl/js/[file].js
Before deployment when I execute npm run production, I can see that files are being generated in root/public/js. But after deployment the system seems to be unable to find/access them. All the routing has been handled using vue router in the development.
Is this issue somehow related to webpack.mix.js or is the expected folder structure different after being deployed? Am I missing something important here that is needed for production? I am new to Vapor and AWS so help will be really appreciated.

Heroku not applying environment variable changes in Okta OAuth 2.0 PKCE VueJs app

I' trying to execute the OAuth 2.0 PKCE demo with a VueJs app outlined here:
https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce
https://github.com/oktadeveloper/okta-auth-js-pkce-example
Once in the Heroku App I have these Environment Variables:
Everything appears to be running fine except for the fact that the variables OKTA_CLIENT_ORGURL and OKTA_OAUTH2_ISSUER were refering to an incorrect dev-XXXXXX address, the correct one is the one shown on the picture (dev-371167), before it was someone else's url (dev-739491) for some reason.
The problem is that after making the changes shown in the image to the correct dev url, it's still making the calls to the old dev-739491 url.
Heroku doesn't seem to be refreshing or making the desired changes in the app.
Am I missing an option to refresh? Is it possible to rebuild so it reads the new changes? Could the problem be in the code/build itself?
Thanks.
EDIT: As per the suggestion in the comment I turned the app off then on again and it still didn't make the changes.
This is what my screen looks like:
EDIT 2: I have since deployed the same app two more times and reading the build logs it assigns a random CLIENT_ID and URls. Each deployed app has a different pair of these. I don't know where they come from.
I wrote the Okta Heroku Add-On. I'm looking into the behavior you're seeing.
When you change the environment variables, heroku should restart your app automatically.
So, the two issues are that the environment variables didn't match you saw in Heroku didn't match with what you expected them to be and that the app doesn't seem to be picking up on the environment variables.
How did you know that dev-371167 was the correct org and that dev-739491 was incorrect?
When you say you deployed the app two more times, what exactly are you doing to deploy? Are you using the Heroku cli?

Replace localhost with my domain in Laravel when in production

I am using SPA (Laravel and Vuejs). When in development, website project worked perfect but when after running npm run production and put it on live server, I got errors saying
Access to Xmlhttprequest at http://localhost:8000/auth_check from origin https://hamariweb.com/auth_check has been blocked by Cors policy.
I have tried different solutions that fixed their problems but not mine. I want to know what is wrong with it and how can I fix it?
Sounds like somewhere in your code you're trying to send a request to http://localhost:8000/auth_check which isn't going to work in prod. You need to find the call to that URL and replace it with a call to the correct URL.
You can create an ENV setting in your .env file like this.
APP_URL=https://hamariweb.com
Then share that env file to your javascript code like this.
MIX_APP_URL="${APP_URL}"
Any ENV settings that start with MIX_ are passed to Javascript and this is passing it the initial APP URL value.
To finally grab the app url in the JS do this:
process.env.MIX_APP_URL
You can even assign the entire env settings globally like this.
if(process && process.env){
window.env = process.env;
}
Any .env MIX_ variables will be available in window.env at that point and in your SPA you'll be able to make the URL or any other variable configurable based on environment.

Laravel, codesleeve asset-pipeline not working

I am trying to get codesleeve asset-pipeline to work on my site. After wasting a full day, I finally got it working yesterday on my local development server. I have now uploaded the project to see if everything works on the live server. Guess what- it doesn't. I am guessing the problem is to do with the environment setting, ie:
$env = $app->detectEnvironment(array(
'local' => array('your-machine-name'),
));
So, I have changed that to my machine name when on my local server, which, as I say, I have working. So on the live server, what should this be? "localhost"? I have tried adding another array key for 'live' with my live server's IP address and domain name, as per this answer: http://tinyurl.com/pg6hwum Nothing works.
Also, according to the tutorials I am following:
When you are in the local environment, you will notice that all of your asset files will be included individually ... Once you are in the production environment, all of your assets will be concatenated into one.
That doesn't seem to be the case for me either, as pipeline seems to be half-working, ie. it is concatenating my js and css files, but somehow messing them up.
I'd really appreciate some pointers, as I have wasted a colossal amount of time with this thing now. Thanks.
First set your environment settings on your bootstrap/start.php file into something like this:
$env = $app->detectEnvironment(array(
'local' => array('http://localhost', '*.local', 'http://local.sitename'),
'development' => array('http://dev.sitename.com'),
'production' => array('http://www.sitename.com', 'http://sitename.com'),
));
Second you need to check what enviroment does your laravel is running to check if your environment setup is working properly. By doing this:
App::environment()
So by doing that..you should have idea now what is causing the problem on codesleeve asset-pipeline.
note: see the documentation about environment for more details here
Asset pipeline will out of the box behave differently when on production compared to another environment (like local). I have put in a proposal to document some of these pain points and troubleshooting for new comers.
If you are using the most current version then there are two big behavior changes when switching environments:
caching - production assets are cached. This means once you load a page you will be stuck with those assets until you do
$> php artisan assets:clean
This is why you should set your environment to local when developing.
minification - assets are minified on production only. This can cause issues though because the minifiers sometimes break on code. There are some workarounds you can do to fix this. Something I normally do when having issues with a certain file (say Twitter Bootstrap) is use the .min.css extension which is then skipped by the minifier and written out as-is.
Note that this behavior is out of the box and can easily be modified by editing your configuration.
$> php artisan config:publish codesleeve/asset-pipeline
Then edit your file app/config/packages/codesleeve/asset-pipeline/config.php. For more information on these options visit the documentation here.
Hope this helps.

How to create a subsubdomain for an app on heroku: (e.g. sub.myapp.herokuapp.com)

I am running a multi tenant app that uses subdomains for tenants on Heroku. In production I have a domain where subdomains point to my heroku app. (This all works fine)
For staging, I'd like to test without creating another domain. Since my app uses the first subdomain it sees to find the current tenant, I was hoping to use a url like: tenant.myapp.herokuapp.com. However, this is not working (heroku returns a 'no such app' error.)
I've found this post from 2 years ago that says it should be possible, but I don't see this add-on/option anymore in the referenced documentation.
I have tried adding the subdomains as a wildcard in heroku by running
heroku domains:add *.myapp.herokuapp.com
but this returned
! Trying to hijack another Heroku app? Tsk, tsk.
Does anyone know if this can still be accomplished and if so, how?
note: I'm currently using my staging environment by CNAMING *.staging.myapp.com to myapp.heroku.com, but would like to clean that up.
Here's how you use subdomains with heroku
Full Details here
Custom subdomains
For each custom subdomain you want to attach to your app (for example, www.example.com), use the domains:add command from the Heroku
CLI:
$ heroku domains:add www.example.com`
Adding www.example.com to example... done
This is no longer valid: "Subdomains are currently not possible on heroku"

Resources