[Discussion]: Local Development Not Working

[nisharg-codal]

Hello Team,

I’m a MERN stack developer and new to BigCommerce. I’m currently trying to learn the platform and complete a task, but I’m stuck because I’m not seeing any errors or warnings in the console. So, I’ll explain everything I’ve done so far to see if you can help.

I want to make some changes to the checkout page — for example, changing the “Billing Address” label to “My Billing Address.”

I could edit the theme directly using plain JavaScript (e.g., document.querySelector), but since I need to make more complex changes, I decided to use this repository.
To run the theme, I’m using Stencil, and the file I’m targeting is checkout.html.

I followed the documentation here: https://developer.bigcommerce.com/docs/storefront/cart-checkout/open-checkouts

I completed all the steps and built the project successfully — no errors.

In BigCommerce Admin, I selected Custom Checkout, entered the URL to my build/dist folder (pointing to the auto-loader), and tried different hosting setups —
localhost, 127.0.0.1, ngrok, srv, and even S3 - but none of them worked.

However, when I visit my store’s checkout page (https://*.mybigcommerce.com/checkout), I don’t see any console logs, which makes me think the custom checkout isn’t being rendered.

To debug, I also tried running the theme locally using Stencil and opened /checkout, but it didn’t work either.

I also tried using SRI, but still no luck.

So I’m not sure what I’m missing here. I’ve probably overlooked something important, which is why I’m opening this discussion. Hopefully, someone can guide me on how to properly run and connect the custom checkout.

For context, this project came from another client using version 1.389.0. If the version might be the cause, please let me know as well.

Thanks in advance!

[animesh1987]

Hey @nisharg-codal, I’m not entirely sure about the version since it’s quite old. You might need to run npm run dev:server in one terminal and npm run dev in another to see your changes.

The custom checkout URL should be localhost:8080 if you’re running it locally.

You can update the text here: https://github.com/bigcommerce/checkout-js/blob/master/packages/locale/src/translations/en.json#L46 — that should reflect your changes once rebuilt.

Let us know if that works!

[bc-peng]

After running npm run dev:server, the local checkout-js will be available at http://127.0.0.1:8080/auto-loader.js.

When accessing the checkout page in Chrome, you may be prompted to grant permission for local server access.

[nisharg-codal]

What you suggested, I did in my local but not working...

When accessing the checkout page in Chrome, you may be prompted to grant permission for local server access.

I am not getting any permission popup while accessing the /checkout page

Giving you the video so you can tell me where I am going wrong.

https://drive.google.com/file/d/1YS2ymUlSrVV7aLlmWaJifJc3eN9Bk3UL/view?usp=sharing

[nisharg-codal]

You can update the text here: https://github.com/bigcommerce/checkout-js/blob/master/packages/locale/src/translations/en.json#L46 — that should reflect your changes once rebuilt.

I took latest pull from master branch ( 1.701.7 ) and followed the steps which I have shown you in video and still not working, strange 🥲

[bc-0dp]

Hi @nisharg-codal
In your video you never showed the browser console nor the network tab. In reality the network tab is probably the most important to see if we're even trying to establish a connection to the custom checkout url ie. localhost

[nisharg-codal]

Thanks for the reply, here is the video for that and I have shared video of the latest branch I had pull, where it is not working

https://drive.google.com/file/d/1Tjz8312YEhA4d_JWUbt2pEQzX8Avt3Iu/view?usp=sharing

[bc-0dp]

Hi @nisharg-codal Please check now!

It looks like you had activated channel specific overrides for the checkout settings. So even with only one storefront enabled the store settings were overridden by the channel.

[nisharg-codal]

Thanks a lotttt but how did you do that? I haven't changed any code and now its working, can you please explain, how??