jacob-ebey / remix-ecommerce Goto Github PK

Hello :)

Sooo, I was inspired by your way of dealing with the cart in a cookie. I implemented something quite similar in my project. But I recently hit a cookie limit:

Error: Cookie length will exceed browser maximum. Length: 4262 bytes

There's a reason why the cookie is so "big": I'm storing an array of { id, quantity }. It seems cookies are not the right place when handling requests from a shop-addict.. 😅

What would be the right alternative ?

FYI, I wanted to test your project to test the same scenario, but I hit a different issue:

I got a bunch of errors

➜ remix-ecommerce git:(main) ✗ npm install npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm ERR! code 1 npm ERR! path /Users/amieva/Documents/Programming/Remix-TS/remix-ecommerce/node_modules/better-sqlite3 npm ERR! command failed npm ERR! command sh -c prebuild-install || npm run build-release npm ERR! > [email protected] build-release npm ERR! > node-gyp rebuild --release npm ERR! npm ERR! TOUCH ba23eeee118cd63e16015df367567cb043fed872.intermediate npm ERR! ACTION deps_sqlite3_gyp_locate_sqlite3_target_copy_builtin_sqlite3 ba23eeee118cd63e16015df367567cb043fed872.intermediate npm ERR! TOUCH Release/obj.target/deps/locate_sqlite3.stamp npm ERR! CC(target) Release/obj.target/sqlite3/gen/sqlite3/sqlite3.o npm ERR! LIBTOOL-STATIC Release/sqlite3.a npm ERR! CXX(target) Release/obj.target/better_sqlite3/src/better_sqlite3.o npm ERR! rm ba23eeee118cd63e16015df367567cb043fed872.intermediate npm ERR! prebuild-install warn install No prebuilt binaries found (target=19.4.0 runtime=node arch=arm64 libc= platform=darwin) npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using [email protected] npm ERR! gyp info using [email protected] | darwin | arm64 npm ERR! gyp info find Python using Python version 3.9.6 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3" npm ERR! gyp info spawn /Applications/Xcode.app/Contents/Developer/usr/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/amieva/Documents/Programming/Remix-TS/remix-ecommerce/node_modules/better-sqlite3/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/amieva/Library/Caches/node-gyp/19.4.0', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/amieva/Library/Caches/node-gyp/19.4.0/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/amieva/Documents/Programming/Remix-TS/remix-ecommerce/node_modules/better-sqlite3', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! gyp info spawn make npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ] npm ERR! In file included from ../src/better_sqlite3.cpp:4: npm ERR! In file included from ./src/better_sqlite3.lzz:11: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/node.h:73: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8.h:24: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-array-buffer.h:12: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-local-handle.h:12: npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:477:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! SHARED_EXTERNAL_POINTER_TAGS(CHECK_SHARED_EXTERNAL_POINTER_TAGS) npm ERR! ^ npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:477:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:477:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:477:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:477:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! PER_ISOLATE_EXTERNAL_POINTER_TAGS(CHECK_NON_SHARED_EXTERNAL_POINTER_TAGS) npm ERR! ^ npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:478:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:659:61: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! static_assert(kJSObjectType + 1 == kFirstJSApiObjectType); npm ERR! ^ npm ERR! , "" npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:660:55: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! static_assert(kJSObjectType < kLastJSApiObjectType); npm ERR! ^ npm ERR! , "" npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-internal.h:661:63: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions] npm ERR! static_assert(kFirstJSApiObjectType < kLastJSApiObjectType); npm ERR! ^ npm ERR! , "" npm ERR! In file included from ../src/better_sqlite3.cpp:4: npm ERR! In file included from ./src/better_sqlite3.lzz:11: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/node.h:73: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8.h:24: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-array-buffer.h:13: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-object.h:9: npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-maybe.h:106:45: error: no template named 'is_lvalue_reference_v' in namespace 'std'; did you mean 'is_lvalue_reference'? npm ERR! template <class U, std::enable_if_t<!std::is_lvalue_reference_v<U>>*> npm ERR! ~~~~~^~~~~~~~~~~~~~~~~~~~~ npm ERR! is_lvalue_reference npm ERR! /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include/c++/v1/__type_traits/is_reference.h:26:29: note: 'is_lvalue_reference' declared here npm ERR! struct _LIBCPP_TEMPLATE_VIS is_lvalue_reference : _BoolConstant<__is_lvalue_reference(_Tp)> { }; npm ERR! ^ npm ERR! In file included from ../src/better_sqlite3.cpp:4: npm ERR! In file included from ./src/better_sqlite3.lzz:11: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/node.h:73: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8.h:24: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-array-buffer.h:13: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-object.h:9: npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-maybe.h:106:69: error: expected '(' for function-style cast or type construction npm ERR! template <class U, std::enable_if_t<!std::is_lvalue_reference_v<U>>*> npm ERR! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^ npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-maybe.h:123:43: error: no template named 'is_lvalue_reference_v' in namespace 'std'; did you mean 'is_lvalue_reference'? npm ERR! template <class T, std::enable_if_t<!std::is_lvalue_reference_v<T>>* = nullptr> npm ERR! ~~~~~^~~~~~~~~~~~~~~~~~~~~ npm ERR! is_lvalue_reference npm ERR! /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include/c++/v1/__type_traits/is_reference.h:26:29: note: 'is_lvalue_reference' declared here npm ERR! struct _LIBCPP_TEMPLATE_VIS is_lvalue_reference : _BoolConstant<__is_lvalue_reference(_Tp)> { }; npm ERR! ^ npm ERR! In file included from ../src/better_sqlite3.cpp:4: npm ERR! In file included from ./src/better_sqlite3.lzz:11: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/node.h:73: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8.h:24: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-array-buffer.h:13: npm ERR! In file included from /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-object.h:9: npm ERR! /Users/amieva/Library/Caches/node-gyp/19.4.0/include/node/v8-maybe.h:123:67: error: expected '(' for function-style cast or type construction npm ERR! template <class T, std::enable_if_t<!std::is_lvalue_reference_v<T>>* = nullptr> npm ERR! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^ npm ERR! ./src/util/macros.lzz:157:21: error: no member named 'AccessorSignature' in namespace 'v8' npm ERR! v8::AccessorSignature::New(isolate, recv) npm ERR! ~~~~^ npm ERR! ./src/objects/database.lzz:180:21: warning: variable 'status' set but not used [-Wunused-but-set-variable] npm ERR! int status = sqlite3_db_config(db_handle, SQLITE_DBCONFIG_ENABLE_LOAD_EXTENSION, 1, NULL); npm ERR! ^ npm ERR! ./src/util/binder.lzz:37:51: error: no member named 'CreationContext' in 'v8::Object' npm ERR! v8::Local<v8::Context> ctx = obj->CreationContext(); npm ERR! ~~~~~^ npm ERR! 21 warnings and 6 errors generated. npm ERR! make: *** [Release/obj.target/better_sqlite3/src/better_sqlite3.o] Error 1 npm ERR! gyp ERR! build error npm ERR! gyp ERR! stack Error: make failed with exit code: 2 npm ERR! gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12) npm ERR! gyp ERR! System Darwin 22.4.0 npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release" npm ERR! gyp ERR! cwd /Users/amieva/Documents/Programming/Remix-TS/remix-ecommerce/node_modules/better-sqlite3 npm ERR! gyp ERR! node -v v19.4.0 npm ERR! gyp ERR! node-gyp -v v9.3.0 npm ERR! gyp ERR! not ok

Hello!

I wanted to discuss potentially changing the type structure of ECommerceProvider so that the session is passed into it. I'm working on POCing with Salesforce Commerce Cloud, and they provider a series of APIs that require the app to generate an access token per session (think guest customers).

This API also requires that the app maintain a refresh token, and handle the use case where the access token expires. I wasnt quite sure where to put all of this logic, and it feels like it belongs in the provider implementation.

If there's a better Remix way of doing this, let me know.

Hello,

I've forked this repository to create a MVP to demo how good this library is. I've never used Fly.io, nor Redis that much so I think I probably messed up the configuration somewhat. Serving locally on my machine works just fine, but when serving to Fly.io, the images aren't loading as you can see here:

https://empty-frost-2311.fly.dev/

Any idea what I may have done wrong? I created a persistent volume on my App which is tied to here:

[mounts] destination = "/app/.cache" source = "hive_volume"

And I also created a separate Redis app on the same team, but I am still having the same result. I'd really appreciate any help here.

Thank you @jacob-ebey !

From Shopify's docs:

The Storefront API is rated limited by the buyer IP and can not be utilized server-side or with a proxy for this reason.
The Storefront API utilizes a time-based leaky bucket algorithm and every request to the Storefront API costs at least 0.5 seconds to run.

This means that every request that hasn't already been cached on Redis will be forwarded to Shopify Storefront API. This is the case for every possible cart. Consider the following scenario:

1. User A adds first Product X and then Product Y to the cart and proceeds to checkout.
2. Ten minutes later User B adds first Product Y and then Product X to the cart and proceeds to checkout.

Both actions call the getCheckoutUrl function.

Even though the carts have the same products, User B won't hit a cache because the hash used for caching that was produced by User A's request is different from User B's due to the different sequence with which the items were added. This becomes even more problematic if you give some customAttributes to each lineItem added to the cart, since each different set of customAttributes will result in a cache miss.

One solution I thought of is to perform on the server only API calls that are more cacheable (such as getProduct or getPage) but what happens when the cache goes stale and we have to revalidate it? In a medium-sized store we'd hit the API rate limit very quickly.

Am I missing something here? It seems to me that using exclusively SSR might not be the best strategy for building a Shopify storefront.

If I'm not mistaken: after reading the article on Remix.run website, the example is deployed on fly.io?
I see you are using Redis and you use docker-composer for Redis in local environment.

But for production environment, which Redis instance you use? The Redis instance isn't hosted on fly.io?

Kindly add the steps to be able to run this app locally. Would love to take this for a spin to understand Remix in detail.

Thanks!

both minWidth and maxWidth are things you can define on a responsive image, it seems there's only currently support for maxWidth

There is no license file in this repo, would it be ok to copy code from this to my own project? (especially the image optimisation route).