Local Development

[pulpfree]

I’m attempting to create a "Custom Checkout" based on this repo. Could someone point me in the right direction regarding the setup of a local development environment?

I've found articles on how to install etc. here, but I find that process prohibitive as it's done on a live environment, and worse, the build file is cached restricting any iterative changes.

I imagine a sandbox environment with some mock data would work for just the checkout process, but curious how are other developers dealing with this?

Any help is appreciated.

Thanks, Ron

[animesh1987]

Hi @pulpfree you can try disabling cache in network tab, that may help with build file not being cached. Also checkout right now as far as I know requires a live store to work on.

Apart from that we are aware regarding the developer experience not being the best. We will be looking at making the developer experience better in the next coming months.

Please feel free to add more ideas/feedback to this comment thread so we can look at incorporating them.

Thanks.

[r742davis]

@pulpfree I just started working on the checkout as well and here's how I've set up the local dev environment.

I use a Sandbox Store I set up via BigCommerce, connect the Sandbox's Stencil CLI credentials to the store theme I want to work with, upload that theme to the Sandbox Store, and test the checkout on there.

I run 3 things concurrently when developing locally:

1. stencil start local BC theme connected to custom checkout build on http://localhost:3000
2. npm run dev to launch the webpack watcher/builder
3. npm run dev:server to serve the build to the local address on your store (ex: http://127.0.0.1:8080)

Hope that helps! I'm still figuring it out myself

[pulpfree]

Thought I might provide some feedback here for anyone else struggling with this. See issue #754 for my comments on npm version problems. Apparently, npm v17.0.1 doesn't like the version of node-sass and I ended up using npm v14.17.5 successfully. I did make a bad assumption thinking my DevTools cache setting was checked :[

To avoid potential issues of caching on my production server, I'm bumping the version with npm run release:version before creating a build for production and using the auto-loader-<VERSION>.js file. Of course, that necessitates updating the Script URL path in the BG admin, but that beats serving stale files after letting your client know: "everything's been updated successfully". I should mention that I've created a separate development branch, with a separate remote for pushing to my own repo, some conflicts when pulling from the BG upstream, but don't know of a better solution yet.

I plan on distributing the production files on AWS S3 and Cloudfront. I would expect AWS to distribute (using Cloudfront) the files closest to the BG server location, anyone with thoughts/comments on this?

[skdhameliya]

1-which version is required of node and npm to setup checkout repo at local? 2-Do we have to keep both same?

[yaroslav-perec]

Hi! I'm still struggling with how to test this checkout, I've cloned the repo and did the following steps from the doc:

If you want to test your checkout implementation, you can run:

npm run dev:server
And enter the local URL for auto-loader-dev.js in Checkout Settings, e.g http://127.0.0.1:8080/auto-loader-dev.js

But when I'm navigating to the checkout page in my app I see the next (see attachment)

Can anyone help with this? Maybe I missed something..

[Mubeen07]

I'm also facing the above issue https://github.com/bigcommerce/checkout-js/issues/753#issuecomment-1190611609

[Mubeen07]

@bc-peng can you please address this issue as well?

[bc-peng]

This screenshot is a checkout page without a working checkout-js.

npm run dev:server will serve files inside /build folder with the help from http-server. Maybe you can start with serving the main branch of https://github.com/bigcommerce/checkout-js.

Node and NPM requirements are stated at https://github.com/bigcommerce/checkout-js#requirements.

[Mubeen07]

@bc-peng I followed the documentation, I tried with ngrok instead of localhost but still facing this issue. Unable to find any help till yet.

[bc-0dp]

Hello,

Have you checked your console for errors? If a valid cart/checkout ID is not passed for instance. It will fail with errors in the console.

[Mubeen07]

@bc-0dp the only error I'm getting in console is

[matthewdolman]

@bc-0dp the only error I'm getting in console is

I got this because I was running it in windows, if you are on a windows machine do the npm dev in wsl.

[bc-0dp]

We list in our requirements that a unix-like system is required. So very nice to have it verified that WSL is a feasible solution for windows users

[bc-0dp]

Hi @pulpfree Was this issue resolved for you in the end?

[pulpfree]

@bc-0dp we eventually abandoned this approach, so I can’t really comment.

[bc-0dp]

Sorry to hear that @pulpfree. 😢 Hopefully you got the project launched successfully in the end though 🚀 ❤️