#Alpine.js button from standard Laravel Breeze package not working in prod

47 messages · Page 1 of 1 (latest)

lunar parcel
#

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...

umbral wyvernBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

sage pawnBOT
#

Project ID: 55b60c33-a3b7-4eb2-b9a5-29ec31b81552

lunar parcel
#

55b60c33-a3b7-4eb2-b9a5-29ec31b81552

past sail
#

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

lunar parcel
past sail
#

unfortunately that does not automatically mean its an issue with railway

lunar parcel
#

So it's hard even to debug. Am I supposed to deploy every little change to see if it solved the issue? Quite annoying

past sail
#

nope you are supposed to install nixpacks and docker on your computer to build and run the docker images locally

lunar parcel
past sail
#

you dont have permission to write to wherever you are writing to

lunar parcel
#

should have prefixed with 'sudo'... going further!

lunar parcel
#

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'))

past sail
#

do you have a database running locally?

lunar parcel
#

yes

past sail
#

then you aren't using the right credentials or variables

lunar parcel
#

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=*******

past sail
#

might wanna look into internal networking with a dockerfile

lunar parcel
#

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

past sail
#

well there is a dockerfile made at one stage, but the output is an image, that you then run with docker

lunar parcel
#

running sudo docker run -it manul-shop --network="host" helped, it started the app from a container!

past sail
#

perfect

lunar parcel
#

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?

past sail
#

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?

lunar parcel
past sail
#

is an onclick event even registered for that particular button?

lunar parcel
past sail
#

just but does the browser see an on click event being registered

lunar parcel
#

It seems so

2023-06-06_031509.png
past sail
#

that doesn't prove anything

lunar parcel
#

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.

past sail
#

and there really isn't any errors anywhere?

past sail
#

this is a "dropdown"

image.png
lunar parcel
#

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>`
past sail
#

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?

lunar parcel
#

Surely! Thanks a lot for the attention!

#

There are seeders for the database included

past sail
#

okay I'm out right now, but will take a crack at this later

past sail
#

it looks like alpine.js inst being included in the profile page's js bundle

lunar parcel