Show HN: Napkin – Build back-end functions in the browser | Hacker News Reader

Show HN: Napkin – Build back-end functions in the browser

napkin.io

158 pointsnsypteras70 comments

Writing simple cloud functions right in the browser makes so much sense to me. I've used webtask.io before it was acquired and shut down. I had to switch to GCP cloud functions and it's lots of pain. Every time I want to run the function I need to deploy it first and it takes like a minute.

Playing with Napkin, it looks very promising. Just the things I need: write random code, test it right there, press deploy and get the endpoint right away.

Love that it's free for personal use. Just make sure you make enough money on paid plans and don't shut down like Webtask!

Is it possible to store the code in git or fossil or any vcs? Is there room for code review before deploying? I'm all for whatever editor people find useful, and for easier deployment, but at a glance this feels very similar to editing your cgi directly on the server.

Maybe all the devs that shot themselves in the foot editing php over sftp are getting old, and it's time for a new generation to learn that fear?

Totally valid concern. We plan to add Github integration soon which will also enable local development, code reviews, etc!

Any particular reason to go for github instead of gitlab ?

Just used this to make a quick slackbot for my team each time our hasura database is updated with a new user. I’m so impressed since I don’t think I could have ever learned or implemented anything in the backend as quickly as I just did with this. Do you guys plan to add team collaboration features soon?

Thanks for comment, so glad to hear that! We are planning to over team collab features later this summer!

I recently hacked together something like this, it's good to see someone else has had a similar idea

https://spotless.run/

Nice! I really love the simplicity of Spotless! Thanks for sharing and definitely reach out if you'd ever like to chat more about this space or any general feedback - nick@napkin.io

https://autocode.com/ is another player in this space.

Here is another one also including a serverless SQL database in the free tier: https://cloudbackend.appdrag.com/

This is awesome - using this in production for vdiff right now.

Two things I'd love: 1) code review (just like GitHub) 2) team collaboration

Awesome job y'all.

I think this is the missing piece that will complete the workflow of developing and designing on the web! Great work guys.

Ah, this is a nice idea, and it seems well executed, so nice work!

My first reaction was "well, of course stuff like 'configuring servers' and 'CI/CD' (from the philosophy page [0]) isn't just overhead, it's beneficial and indeed necessary complexity once you need certain guarantees from your software's behavior and the way you deploy it"

But, I'm sure you're already well aware! That probably isn't the point of what you've built, it seems like it has a lot more value in lowering the barrier to entry for writing backend code (perhaps for people who otherwise wouldn't have bothered), which can still be a lot of friction even using something like Heroku, for instance.

[0] https://www.napkin.io/philosophy

Thanks a lot! Yes currently those things definitely are beneficial and necessary at production scale; however, we're hoping we can chip away bit by bit at the need to configure these things yourself, starting with basic server(less) configuration.

Sorry I’m dense, but what is this? Is this like an Amazon lambda function tied to an API Gateway?

Essentially yes. It's an in browser editor that deploys your code as a public API endpoint as you type. It has the functionality of Lambda + API Gateway + Cloudwatch Logs with a lot of other utilities built in to expedite building small serverless functions

> It's an in browser editor that deploys your code as a public API endpoint as you type.

Does it really deploy code as I type? So the functions are mostly broken while I'm editing them?

The sandbox editor (napkin.io/sandbox) deploys as you type, but when you are signed in, changes are only deployed once you click "Deploy".

I’m learning to code and want to deploy a static site server. I feel this could help me, but I’m not sure.

I guess it is self evident for experienced programmers but from the site I can’t tell exactly what it does.

Hey! If you’re familiar with the term JAMstack, you can think of us as the “A” for API’s. A static site like a blog typically doesn’t need any backend-specific functions but anything that requires a server to run you could use Napkin for. Popular frontend hosting platforms like Netlify and Vercel also have serverless function add-ons that can be attached to your project.

Our goal is to be the “CodePen for backend” and our one-off functions can be used for more than just websites (think mobile apps, IOT devices, etc). We’re excited to build out examples and enable discovery very soon!

I didn’t know about Jamstack, but I find it a very interesting way of delivering an app. I will study the possibilities for sure!

Thank you very much.

If you're familiar with webhooks, you can code and deploy them easily with Napkin by just writing code in the editor and clicking "Deploy". With other tools, you usually have to install dependencies on the command line or set up more complex cloud services to do this. You can see an example of the webhook use case with this Slack bot example: https://napkin.wiki/slack

For a static website, there's a lot of great options that don't require a "backend" per se. Vercel and Netlify are great if you use React and/or Next.js. For a no-code solution you can check out Webflow. If you want to just serve static HTML/CSS/Javascript pages, my preference is to do that with just AWS S3 (https://docs.aws.amazon.com/AmazonS3/latest/userguide/Hostin...).

Congrats on learning to code! If you ever want to chat about backend stuff feel free to reach out to nick@napkin.io :)

Thank you very much for the explanation and tips. I want to start with a static site as a proof of concept to show some friends. But eventually I would like to advance to a dinamic web app that can be used from tablets or phones. Looks like napkin could help me start prototyping without having to learn the whole backend stack , which is just another complex new learning process to add on top.

I made one for Observable runtime https://observablehq.com/@endpointservices/serverless-cells

it's amazing having seamless code sharing between front end and backend, with inline code documentation.

I made a whole oauth server like this! https://observablehq.com/@endpointservices/auth

My head automatically added "what could possibly go wrong" to the submission title, but this actually looks pretty neat. Gonna give it a try.

App looks great! great work guys! Few questions:

- Are you guys deploying a separate project in vercel for every user or using shared project among all?

- What's the security mechanism for storing environment variables? is it in vercel itself?

- Any plans for typescript support?

- Intellisense was not working for an installed package. It'll be great if it can!

Hey! Thanks for the questions and feedback. We have a single project on Vercel to host the Next.js frontend but that's the extent of our usage there, and our usage is mostly static with some SSR to fetch user and public functions.

Thanks for the questions!

- The javascript and python runtimes are hosted on AWS. With the sandbox editor, resources are shared and code is executed in sandboxed VMs. For signed in users, each user is given a fully isolated environment with their own resources. - typescript: We'd love to add it, though we haven't decided when to do so yet. If more people request it we will surely expedite it! - environment variables are stored in AWS Dynamo DB and are encrypted at rest - Intellisense for installed packages: would love to add this soon as well, though like Typescript, still on the backlog for now. Would love to hear any other ideas for enhancing the editor experience if you have them! Happy to chat more anytime - nick@napkin.io

Can't wait to build all my bots off this

Seems like a good way to test and play around with APIs before coding it all out

I have been looking for something like this for a long time! Well done guys.

First impressions:

Saving / Deploying after every keystroke is not really what I want. I rather have a Save button so I have time to fix any errors because sometimes it just hangs there for a while saving/deploying something that I don't really need. In this topic, maybe seeing something more other than a progress bar, so I know that something is actually happening. -

That’s great feedback, thanks so much. We want to perfect the editor experience as much as possible. It can’t ever completely replace local, though, so we hope we can release our API in the future for this use case.

No problem! I think an option to disable "auto-save" will just fix this for me. Because I always have to "wait" to press Run. I would rather wait after pressing Run.

Ah got it, yes I’ll note this for next week’s update. Thanks and definitely let us know any other feedback! thomas@napkin.io :)

Nice work Nick!

This is the first time I've come across this https://magic.link/ service. Logging in via email like this is a fascinating idea.

It’s actually Firebase Auth’s Email Link (completely free compared to magic.link)

The price is the data, nothing is completely free

Not necessarily in this case. Firebase is a gateway to paid Firestore, Storage, and Google Cloud. They give away Auth for free and is ISO and SOC compliant. An argument can be made for their free analytics offering though.

To be clear, are you saying one shouldn't be concerned about running their webapp on Firebase/store because of the regulations surrounding what Google can do with that data? (customer usage changes for choosing when to start building competing products, for starters)

Looks similar to Vercel's functions and Cloudflare's Workers.

We’re big fans of both!

What options do developers have for things like unit testing and organization as code bases scale? Are we restricted to a single “file” per endpoint? Is local development an option at all?

Unit testing - no unit testing yet but you can test out mock request data by using the Run Options tab in the Napkin editor. Organization - folders and workspaces coming soon, but if you have any other ideas for this we'd love to hear it! Right now you are restricted to single "file" per endpoint. In the future we plan to enable Napkin functions to reference each other which we hope will mitigate some of this limitation. Local development is not currently an option; however, we plan to add Github integration some time this year, which would enable this. How we prioritize it will depend on how many users ask for it.

Thanks so much for the questions!

Cool, sounds like you have some cool milestones to work towards! I've thought a lot about a product like this and it's really cool to see that you guys have already got an MVP going. I would love to chat some time about current implementation and long term vision of Napkin if you're down! Maybe hearing my gripes will help you guys flesh out the road map lol

Would love to! Please reach out to nick@napkin.io and let's do it!

Looks useful, can it handle image and video manipulation npm packages? So I could crop and resize images on this service?

Thanks for the comment! Yes you can use any NPM or Python package capable of doing that in Napkin. One limitation right now is that you cannot send back file data in responses, so you would have to upload to some external store like s3 and then return a url.

okay that's what I'd be doing anyway, it's much easier to upload to something like s3 anyway - is there any boilerplate for uploading?

Or do I just install the s3 package and do it like an express server?

No boilerplate currently, we plan on adding a lot of examples to the site going forward. For now yes you would install any packages you need as you normally would from the "Modules" tab in the editor. More docs here as well: https://napkin.wiki/docs/javascript

okay thanks , it all looks very promising, I'll give it a spin!

I've been wanting something like this for an idea of mine[1]. Would love to have the ability to send arbitary responses (JPG/PNG)

[1]: https://github.com/captn3m0/ideas#svg-to-png-on-the-edge

I don’t see a link to their Github page (did see one for Instagram !). Am I missing it ? Thanks

Hey! We're not yet open sourcing our tech during our beta period, but you can watch out for it here: https://github.com/napkinhq. We'll likely have a release for any open source tooling.

Cool idea, well executed. How do you compare with repl.it?

Thanks! Replit (and Glitch) are cool but ultimately they didn't pass our sniff test for production use cases. We believe our serverless architecture sets the foundation for the Napkin function to be a LEGO-like block to build complex systems at scale. We also like the idea of a simple isolated unit that can be shared. It's more lightweight, more understandable, and we'll be exploring ways to tackle discovery in the coming months :)

Looks cool.

Your demo on the homepage breaks if you try to `import pandas`

Thanks for reporting that! I just tried myself and seems to have worked. If you have any repro steps or other bug reports please do let us know anytime on twitter or at support@napkin.io . Thanks!!

`import pandas as pd` occasionally gives me:

    Traceback (most recent call last):
    File "<string>", line 2, in <module>
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    [Previous line repeated 221 more times]
    File "/var/lang/lib/python3.8/site-packages/pandas/__init__.py", line 11, in <module>
        __import__(dependency)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    [Previous line repeated 221 more times]
    File "/var/lang/lib/python3.8/site-packages/numpy/__init__.py", line 150, in <module>
        from . import core
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    [Previous line repeated 221 more times]
    File "/var/lang/lib/python3.8/site-packages/numpy/core/__init__.py", line 9, in <module>
        from numpy.version import version as __version__
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    [Previous line repeated 221 more times]
    File "<frozen importlib._bootstrap>", line 991, in _find_and_load
    File "<frozen importlib._bootstrap>", line 975, in _find_and_load_unlocked
    File "<frozen importlib._bootstrap>", line 671, in _load_unlocked
    File "<frozen importlib._bootstrap_external>", line 844, in exec_module
    File "<frozen importlib._bootstrap_external>", line 939, in get_code
    File "<frozen importlib._bootstrap_external>", line 1037, in get_data
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    File "/napkin-entrypoint", line 104, in _import
        return original_import(name, *args, **kwargs)
    [Previous line repeated 59 more times]

Yep, this is the same error I was getting.

can you email your napkin function id (or the full url path) with us so we can investigate? that would be very helpful, thanks in advance!

support@napkin.io

Thanks for sharing the stack trace. If you could share your username here or with nick@napkin.io I will dig deeper to see what's going on there. Pandas never fails to both assist and haunt me :)

I wasn't signed in, just using the splash example/demo.

If you could send us the id/url path of the sandbox demo you were on with the error that'd be super helpful. Thanks in advance! support@napkin.io

Is it similar to cloud9 ide?

cloud9 ide is definitely a pioneer! We see Napkin as a part of the natural evolution in our productivity/dev tools, especially as we adapt to the advent of serverless architecture

Right now the goal is similar to that of cloud9 - provide an in-browser dev environment for quickly building apps; however, Napkin focuses on the serverless backend function and prototyping use cases. We want to streamline the UI to make writing and deploying Python and JS functions as quick as possible with 0 configuration. In the near future we will be adding some sharing/forking capabilities that we think will enhance this even further!

Can't wait to have it support team collaborations!!

Wow is this just going to replace basic backend engineers forever? Just think how many people y’all are putting out of a job with this.

The code doesn’t write itself. You still need to design the api and queries/models. What this does is remove a layer of friction.

This is what AWS Lambda should be.

Reply on news.ycombinator.com