Need helping getting started with Swell and Builder.io

Daniel Hartzheim

I'm not a developer but can apply code where told. :-)

Support gave me this GitHub repository link/guide for connecting Swell and Builder.io. However, I can't seem to be able to clone the repository into Builder successfully.

Using Terminal on my mac, here's what worked:

git clone https://github.com/swellstores/nextjs-builder.git
cd nextjs-builder

This part

npm install --global "@builder.io/cli"

Resulted in these deprecated warnings:

npm WARN deprecated @types/[email protected]: This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.

npm WARN deprecated [email protected]: Use @graphql-toolkit/* monorepo packages instead. Check https://github.com/ardatan/graphql-toolkit for more details

npm WARN deprecated [email protected]: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead

npm WARN deprecated [email protected]: GraphQL Import has been deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-import for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.

npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

/usr/local/bin/builder -> /usr/local/lib/node_modules/@builder.io/cli/dist/index.js

npm WARN [email protected] requires a peer of graphql-tag-pluck@^0.8.3 but none is installed. You must install peer dependencies yourself.




+ @builder.io/[email protected]

updated 1 package in 4.137s

And this part (with my secret API key and space name inserted):

builder create --key "<private-key>" --name "<space-name>" --debug

Resulted in this (strangely, I did get the amazing "Builder.io cli" text graphic, but below it I got some errors):

  ____            _   _       _                     _                    _   _ 

 | __ )   _   _  (_) | |   __| |   ___   _ __      (_)   ___       ___  | | (_)

 |  _ \  | | | | | | | |  / _` |  / _ \ | '__|     | |  / _ \     / __| | | | |

 | |_) | | |_| | | | | | | (_| | |  __/ | |     _  | | | (_) |   | (__  | | | |

 |____/   \__,_| |_| |_|  \__,_|  \___| |_|    (_) |_|  \___/     \___| |_| |_|

                                                                               

(node:59590) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'undefined/settings.json'

(Use `node --trace-warnings ...` to show where the warning was created)

(node:59590) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

(node:59590) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.npm install --global "@builder.io/cli"

If I can get this sorted, I *think* I'll be off to the races with Builder and Swell. However, I'm not really sure what to do with the next steps talking about .env.development and .env.production and localhost stuff.

I was under the impression I'd be using Builder's cloud-based visual CMS rather than building locally. Definitely want all the features of Builder and its fast cloud servers, etc. Want our marketing team to be able to use Builder in the cloud.

Any help is much appreciated!

Daniel Hartzheim

Thanks, Greg.

Discovered two issues on my end:

1. I wasn't in the nextjs-builder directory when installing the builder.io cli and trying to create the builder space
2. I had spaces in my builder space name, rather than hyphens.

Now I've successfully gotten through this step of cloning the repository and creating a space and receiving the public API key.

Thanks again. I'll probably have another question soon with the next steps. ;-)

Greg

@Daniel Hartzheim nice work getting that setup locally. We're working closely with Builder to enable deployment directly to a hosting provider, in the near future. In the meantime, I'd recommend deploying to Vercel using their handy CLI tool (https://vercel.com/docs/cli), though you can deploy to any hosting provider you like. Deploying to vercel is as simple as running 'vercel' or 'vercel --prod' in your project's directory and following the prompt from there.

Greg

Hi Daniel,

It looks like the Builder CLI was installed successfully and I wouldn't worry about the first group of npm deprecation warnings for now. Can you try running "npm install" before attempting the "builder create.." command again? I suspect that some packages may still need to be installed locally.

I realize the starter kit is certainly developer-focused but we're working on providing some closer and more accessible integrations with Builder in the future, as we too love their product! By the way, the .env files are used to provide environment variables to your respective environments.

Daniel Hartzheim

@Greg I got the store connected to Builder and can preview it on the local host (actually 3004 rather than 3000 - not sure why). But how do we connect to a temporary or permanent domain so our marketing team can use Builder in the cloud? Frankly, I don't even know what the local host development mode is for. My understanding is with Swell's great backend and Builder's great frontend visual CMS, that we would just connect the two and everything will live in the cloud - our design/marketing team can log into Builder to edit the site. That's my goal. Would greatly appreciate your help to get our workflow going. Thx

Daniel Hartzheim

@Greg, thank you. That was exactly what I needed. Got it up on Vercel with a custom domain, so it's close to working as expected.

The current issue I'm having appears to be a caching one:

From my localhost connection, I initially created this version of the homepage:

Then I pushed it to Vercel with the custom domain and changed the design to this:

The latter is what I get when I click the Vercel project preview and it opens https://new.mountaintactical.com. However, when I refresh/hard refresh the page it reverts to the former (localhost version).

Can you confirm on your end and provide any insights if it is the case?

Daniel Hartzheim

@Greg this is backtracking, but I should've asked from the beginning:

When using Builder.io and adding the Swell built-in integration (and filling out the settings with Swell’s store id and public key), does that automatically allow me to access Swell data in Builder like I believe it does with Shopify? I was really hoping I could just create pages/content in Builder and, using the Swell integration, be able to add in product data like images, pricing, description, categories, etc.

This video shows how Shopify data is readily available: https://www.youtube.com/watch?v=kWGnqf6JeX4

Meanwhile, in this other video, they demonstrate building an eCommerce site using Shopify, Next.js, and Builder.io: https://youtu.be/qenhhg7xIGQ?t=2023

This seems more on par with Swell's github repository approach to connecting with Builder as we went through originally on this post. However, it seems their Code Components are more in number and possibly more flexible as seen in their video:

Versus:

Maybe it's not all that different. I'm just confused and probably need a video tutorial on how to do this. If I ever figure this all out, I'll definitely be making some video tutorials, haha.

And as one more thought, is it possible to load in Swell data via this box in Builder?

I appreciate any help on getting things going in the easiest way. I really just want to be able to use the Swell backend and Builder designer without using code, local host, Vercel, etc if at all possible.