need help with setting up ENV in finsweet dev starter
I need help with setting up Env files. Need it to hide some apis and some auth code in the project I’m working on
10 Replies
@Web Bae
I get this error
require statements are node specific (a different runtime environment for javascript)
The common javascript runtime is the browser, which doesn't undestand require('your-library-here')
The errors are coming because the bundler (esbuild for Finsweet dev starter) is set to build for browser but dotenv thinks it is running in node.
I know it's confusing... these kinds of errors hurt me for a long time.
also the finsweet dev started is geared towards client-side code, which wouldn't really be suitable for a .env file.
Can you share more about your project? Are you trying to hide an API KEY? If so you'll need a middleware like Cloudflare workers for that. i.e. you need a server you can configure
did you try adding "type": "module" to your package.json?
Thanks for you reply
I’m try that.
The project involves getting data from airtable and displaying it in a Webflow site.
Done most of the work, just looking for a way to hide the API from public. And I also want to ask aside from using GitHub to serve code to Webflow, which other option can I use if I want to set the GitHub repo to private. @Web Bae
Done most of the work, just looking for a way to hide the API from public. And I also want to ask aside from using GitHub to serve code to Webflow, which other option can I use if I want to set the GitHub repo to private. @Web Bae
only way to hide the API key is to make your HTTP requests via logic or to use middleware (I use Cloudflare workers)
you could also use Make.com as a middleware too
Webflow doesn't give us access to server configuration so making a .env file in your project wont really do anything to hide the API key
to serve the code you could... host it on NPM. save it to a .txt file and upload direct to webflow
no matter which way you host it the code itself will be public
There are a few options to keep your source code private.
If you want to make the entire repo private, you'll have to host the code publicly somehwere (using methods described above). You could minify the code to make it more difficult to read / reverse engineer.
if the main reason you want to take the repo private is to hide the API key again ... you can't do that with client-side code. You'll need a middle ware
Thanks 😊, I really appreciate your reply.
Can you do tut for us on the cloud fare worker 🙏🏾
sure
Alex from Finsweet has a good tutorial on using cloudflare workers as a backend too
you won't need it as a backend but as middleware
Yeah, saw all the serious he was doing, will def check it out.
Please can explain this better.
for the .txt file...
just copy/paste your javascript code into a .txt file
upload to webflow assets panel
then set it as src attribute in your script tag
i.e.
for NPM - the client first README has instructions on how to do that and is a bit out of scope for this thread 🙂
as a reminder - I do 1:1 support and video requests for my Patreon subscribers 🙂
https://www.patreon.com/webbae
I’ll definitely consider being a patron.