bigcommerce
Changing or Updating file breaks the app
Hello, I am trying to customize our BigCommerce checkout by modifying parts of checkout-js. I want to change some HTML and CSS to make the page look the way we want to. Don't need to change any javascript functionality for now. I have the app installed on my mac, and my staging site is successfully showing my local file. Only problem is, whenever I make a change to any of the files, the checkout stops showing up and I see only a blank space under the checkout header. Can someone please point me in the right direction? Thanks in advance.
Hey @mrosswog can you give more details on the issue, if there are any errors in the console that might indicate what the issue might be. What's your development worlflow?
Hello and thanks for your response. I develop on my Mac with Sonoma 14.6.1, using terminal for command line, and BBEdit text file editor. Using node v20.15.0 (npm v9.0.0). I know I can accomplish our needs if I can move around some HTML code snippets and change some CSS classes etc. Whenever I make a change and save the file, I can see that checkout.js in the /build directory has updated, but the changes don't show in the browser. I noticed another thread here where the person mentioned the concept of integrity. I went into webpack.config.js and where I saw integrity=true, I changed it to false, and that seemed to have a positive effect on things. Not sure if this is something I need to research further, but if the app is checking it's scripts against an authentic version, I don't understand how this app can be customized. After changing integrity to false, However, my changes were not reliably immediately visible. I just restarted the development server today after taking a 24 break from the project, and I see that changes I made to the CSS yesterday are showing up now. Not sure if there is a cache running somewhere. I have a lot to learn here and need some pointers. Thanks in advance
We’ve released a feature that allows you to bypass the integrity hash values in the local development environment. You could get it by rebasing your code to the latest master.
Thank you. I started over by re-cloning the depository, running "npm ci", then running "npm run dev & npm run dev:server"
I am following the steps outlined in the below article, however it looks like the file system is different now. https://medium.com/bigcommerce-developer-blog/bigcommerce-checkout-is-now-open-source-39e823bc5b3b
When I add some HTML to packages > core > src > app > checkout > checkout.tsx, the files reload in /build, and have new timestamps, however nothing is changing in the browser.
the HTML i entered is
Testing checkout-js
, directly before {this.renderContent()}I am using Chrome to review my work. I also tested it in Safari - Nothing shows up from the app. Only the header and logo at the top. Same thing in FireFox - nothing showing up below the logo header area.
If you can help me understand what is going wrong, I would greatly appreciate it. Thanks again.
When I run npm ci, the results are daunting.
56 vulnerabilities (4 low, 22 moderate, 29 high, 1 critical)
I am running node 20.15.0 and npm 9.0.0
many of the fixes available through npm audit fix --force are "breaking changes". I assume I cannot apply these changes without causing further issues.
others have a fix available via npm audit fix
one has a status of critial and no fix available:
loader-utils <=1.4.1 Severity: critical Prototype pollution in webpack loader-utils - https://github.com/advisories/GHSA-76p3-8jx3-jpfq loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS) via url variable - https://github.com/advisories/GHSA-3rfm-jhwj-7488 loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS) - https://github.com/advisories/GHSA-hhq3-ff78-jv3g No fix available node_modules/webpack-inject-plugin/node_modules/loader-utils webpack-inject-plugin * Depends on vulnerable versions of loader-utils node_modules/webpack-inject-plugin
I would appreciate any advice you have, Thank You.
We’ve released a feature that allows you to bypass the integrity hash values in the local development environment. You could get it by rebasing your code to the latest master.
Can you please explain how to do this? How do we bypass the integrity hash values? When I edit any files everything stops working.
Things are working much better these days. Going to close the issue. Thanks for your help.