Jump to content
Search Community

How is it currently deploying public repos with npm / yarn or / CI without exposing your GSAP Key?

Hache test
Moderator Tag

Recommended Posts

Hello, my subscription ended a few months ago, I was pretty sad with some GSAP issues I had and I didn't renew my license . The reason was mainly because I wanted to use it on my personal projects(public repos) and I couldn't deploy a react or nextjs project to vercel following instructions without exposing my gsap key.

 


my environment variables weren't being read on the yarnrc. yml file so I had to hardcode the secret key in the code(having to make the repo private,  so back to square one). This is another thing completely but I also had issues in Nextjs with official gsap react demos, using the useLayoutEffect hook things didn't work as expected sometimes, didn't know why, so I was wondering if there was going to be more SSR/Nextjs content.

 

I work with react + nextjs, also plain html + css + js with vite(with github pages for this) and maybe I try some random framework here and there(vue, remix, astro, etc) and I deploy to different hostings, although mostly vercel. I would love to get back into GSAP but not if every deployment is going to be complete suffering.

Cheers

Link to comment
Share on other sites

Ugh, that's painful to hear about, @Hache. Very sorry that it was annoying like that. I'm really not sure what to do about the token issue for repos that you want to publish publicly. Open to ideas if you've got any.

 

As for Next and the useLayoutEffect() issues, I wonder if that was related to the React 18 double-call(?) That'd affect .from() calls logically, but a while back we introduced gsap.context() which should be your new best friend in React/Next. Seriously, it'll save you a lot of headaches, not only with its easy revert() functionality, but also for its scoping capabilities because it saves you from "Ref Hell" (you don't have to create a ref for every element you want to animate - just use selector text). We've updated our React guide here:

 

It may be worth giving things another shot. I'd bet you'll find that once you wrap your stuff in gsap.context(), you'll fall in love again and you won't run into any odd behavior with useLayoutEffect() (I'm totally guessing because I don't actually know what issue you were running into since we don't have a minimal demo to look at). Of course that doesn't solve the token annoyance, but at least it's a big step in a good direction (I hope).  

 

Again, sorry to lose you as a Club GreenSock member. If there's anything else we can do to serve you better and win you back, let us know. We really do care about having happy customers around here. It's a big passion of ours. A little piece of us dies inside when we hear from an unhappy customer. Luckily that's pretty rare. 

 

Thanks for your support in the past! 💚

Link to comment
Share on other sites

Hi,

 

Regarding the useLayoutEffect and SSR issues, @OSUblake crafted a very simple solution for that, you can read about it here:

https://greensock.com/react-advanced#useIsomorphicLayoutEffect

 

As for the deployment issues with a private key here is a repo that is actually working for me without issues:

https://github.com/rhernandog/next-gsap-bonus-yarn

 

What I do is create a .npmrc file with the following content:

always-auth=true
registry=https://npm.greensock.com
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=NPM_TOKEN

Then in my local environment I create a .env.development.local file that has the npm token in it:

NPM_TOKEN=<your-token-here>

Of course neither of these files can be pushed into a repo so you have to setup your npm token in the settings on vercel.

 

In your project page go to the Settings tab:

CfUxOmK.png

There go to the Environment Variables section on the left side:

zhnHKmY.png

There you can set your token and keep it completely safe and your deployments should work without any issues. You can see a live version here:

https://next-gsap-bonus-yarn-l1l0hhlsm-rhernando.vercel.app/

 

As you can see is not much, just a proof of concept that the bonus plugins are loaded and available without any issues.

 

Let us know if you have more questions.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hi @Rodrigo,

 

I'm facing the same challenge as OP regarding the public repository, next.js and Vercel. Like you have instructed I added an environment variable to Vercel: https://imgur.com/GlNLZsK . In my public repository I did add the .npmrc file, so that Vercel would know where to use the variable. See here: https://github.com/olavgit/crftd/blob/main/.npmrc . In my IDE it works just fine, using the .env.development.local like you instructed, but when I push my repo and Vercel tries to build, I keep getting the following error: https://imgur.com/xvKFIvG . Any idea of what is going wrong? Already checked the input of the environment variable, and it doesn't have any characters like a space that shouldn't be there..

 

Looking forward to your reply!
Olav

Link to comment
Share on other sites

Fixed it! For anyone facing similar issues, the setup listed works perfectly fine. Only thing you should change is the .npmrc file to the following:

 

On 3/16/2023 at 11:06 PM, b1mind said:

.npmrc

always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=${GIT_TOKEN}

 

Thanks to @b1mind in another post, but works like a charm.

  • Thanks 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...