Alpine.js button from standard Laravel Breeze package not working in prod
The weird thing is that it works perfectly locally.
But in production https://manul-shop-production.up.railway.app/profile (you can login under b@b email using 'bbbbbb' password) it doesn't.
"Delete account" button. Here is the code:
<x-danger-button
class="btn btn-danger"
x-data=""
x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
>{{ __('Delete Account') }}</x-danger-button>
<x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
.......some code
</x-modal>
Other buttons on this page using alpine.js work both locally and in production... But this one does nothing in production...39 Replies
Project ID:
55b60c33-a3b7-4eb2-b9a5-29ec31b8155255b60c33-a3b7-4eb2-b9a5-29ec31b81552
sorry this isn't really a problem with railway, you will have to do some debugging to see what you have done differently with this button Vs the other buttons
I am trying but the thing that bugs me is that it works locally...
unfortunately that does not automatically mean its an issue with railway
So it's hard even to debug. Am I supposed to deploy every little change to see if it solved the issue? Quite annoying
nope you are supposed to install nixpacks and docker on your computer to build and run the docker images locally
I'm trying to build an image with nixpacks and bumping into
Error: Writing app Caused by: Permission denied (os error 13)Can't find info in official docs on it, neither google anything...
you dont have permission to write to wherever you are writing to
should have prefixed with 'sudo'... going further!
So, executing of 'nixpacks build' command outputted in docker image. But when I try to launch it:
SQLSTATE[08006] [7] connection to server at "localhost" (127.0.0.1), port 5432 failed: Connection refused Is the server running on that host and accepting TCP/IP connections? connection to server at "localhost" (::1), port 5432 failed: Cannot assign requested address Is the server running on that host and accepting TCP/IP connections? (Connection: pgsql, SQL: select tablename, concat('"', schemaname, '"."', tablename, '"') as qualifiedname from pg_catalog.pg_tables where schemaname in ('public'))
do you have a database running locally?
yes
then you aren't using the right credentials or variables
but they work for me. When I run my app locally - I can interact with my DB using these credentials.
Here they are (in my .env file)
DB_CONNECTION=pgsql
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=ecommerce
DB_USERNAME=marre
DB_PASSWORD=***
might wanna look into internal networking with a dockerfile
could you please elaborate a bit?
Thanks for your help, btw
As far as I get it, there is no dockerfile if I use nixpacks build command
well there is a dockerfile made at one stage, but the output is an image, that you then run with docker
https://stackoverflow.com/a/24326540
running
sudo docker run -it manul-shop --network="host" helped, it started the app from a container!perfect
So, now we can return to the original question. Now the button WORKS AGAIN, when I run the app from docker! Doesn't it mean that this is the Railway issue, for all that?
lmfao no I'm sorry but your button not working is not specifically railways fault
is this extremely bizarre? yes
do I know why it's happening? unfortunately not
but I do know that this is not a railway specific issue
do you get any cors errors? any console errors? anything to go off of?
No, nothing at all...
Anyway, at least I got some basic knowledge of using Docker)
is an onclick event even registered for that particular button?
As far as understan (quite little) alpine.js, this:
x-on:click.prevent is called a registering of a onclick event for a button...just but does the browser see an on click event being registered
It seems so
that doesn't prove anything
I've got close to zero experience with alpine.js,, so it's really hard to debug... Maybe I shall place all attributes of this button in a single line?..
It's annoying that obviously I shall use trial and error method to find what's wrong, but this is very cumbersome 'cause I need to deploy the whole project every time to see the result.
and there really isn't any errors anywhere?
this is a "dropdown"
so cant you do this instead?
https://alpinejs.dev/start-here#building-a-dropdown
Hey man!
I'm telling you - something is wrong with Railway in this case. Some variable treating alpine.js there is set differently, or something...
So - I followed your advise, went through this alpine.js basic tutorial and completely refactored my code (along the way finding and fixing one more bug). But IT' STILL DOESN'T WORK PROPERLY on RAILWAY! Now the lower section is always expanded and never collapses! Though, again, locally it works as charm!
https://manul-shop-production.up.railway.app/profile (you can login under b@b email using 'bbbbbb' password)
<div x-data="{ open: {{ $errors->userDeletion->isNotEmpty() ? 'true' : 'false' }} }">
<x-danger-button class="btn btn-danger" x-on:click="open = ! open">
{{ __('Delete Account') }}
</x-danger-button>
<div x-show="open" @click.outside="open = false">
<form method="post" action="{{ route('profile.destroy') }}">
@csrf
@method('delete')
<p style="margin-top:1em">
{{ __('Please enter your password to confirm you would like to permanently delete your account.') }}
</p>
<div class="form-group" style="margin-bottom:10px">
<x-text-input
id="password"
name="password"
type="password"
class="form-control"
placeholder="{{ __('Password') }}"
/>
<x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
</div>
<div class="form-group">
<x-secondary-button x-on:click="open = false">
{{ __('Cancel') }}
</x-secondary-button>
<x-danger-button x-on:click="open = true" class="btn btn-danger">
{{ __('Delete Account') }}
</x-danger-button>
</div>
</form>
</div>
</div>honestly I am out of ideas, but I really do wanna help you, could you provide me with a repo for your code, and possibly a database dump of your database so I can test myself?
Surely! Thanks a lot for the attention!
GitHub
GitHub - Marre-86/manul-shop
Contribute to Marre-86/manul-shop development by creating an account on GitHub.
There are seeders for the database included
okay I'm out right now, but will take a crack at this later
it looks like alpine.js inst being included in the profile page's js bundle
didn't get what you mean. Alpine.js is included to all pages of the app in the main layout where I write:
@vite(['resources/js/app.js', 'resources/scss/app.scss'])
im sorry im out out of ideas then