All of our Glitch Node.js starter projects use the efficient and flexible server framework Fastify. The Fastify team recently released a major update–version 4 includes a number of improvements, but you will need to make a few changes to any existing remixes you created on Glitch before we updated the starters to use it. Read on to learn more!

You can read all about the changes in Fastify 4 in the announcement blog post–here are a few highlights:

Callback and promise confusion has been reduced by requiring calls to reply to be part of a return statement.

Error handling is now encapsulated to improve consistency.

Type providers are now included, allowing your apps to infer types from JSON Schema.

The listen signature has been simplified, with a view to improved contributor maintenance experience.

The minimum Node version now supported is 14.

Kudos to the Fastify maintainers and community for consistently developing a framework that affords Glitch Node.js apps such great performance!

When you edit a Node.js app in Glitch, you can manage your npm dependencies in the package.json file using the dropdown list that shows you any packages that have updates available. If you have a remix of Hello Node, Hello SQLite, or the blank / minimal versions of either of these starter projects, you’ll see the Fastify 4 update in the dropdown list–but you’ll need to make a few additional changes to get your app working with the new version.

Fastify 4 requires at least Node version 14, and there are some packages the starters use that have been deprecated and replaced–there are also a couple of minor server syntax changes.

In your project, open the Logs so that you see the progress unfold. Don’t worry when you see the little sweary face in your app Status at the bottom of the Glitch editor as you carry out the updates–it’s all part of the fun and they’ll turn happy again by the time you’re done!

Check out the help doc for detailed steps, here’s the TLDR; on what you’ll need to change:

Update the node version in your package JSON to 14

Remove any of the deprecated packages: fastify-static, fastify-formbody, point-of-view

Add any of these that you still plan on using with their replacements: @fastify/static, @fastify/view, @fastify/formbody

Update references to these in your server JS code

Update your server JS code listen function to pass the host and port values inside an object, like this: fastify.listen({port:process.env.PORT, host:'0.0.0.0'}...

Include calls to reply in a return statement

Give Glitch a little time to update and rebuild your project between steps and hopefully it’ll work the way you expect! If you have any issues take a look in the Logs, and turn on detailed logging in your server JS file if necessary. 

Check out the updated starters to see the new syntax in action:

Are you building anything new with the updated Fastify capabilities? Share it on the community forum!

Those two beautiful cheetah photographs at the top of the post were taken and shared with the commons by William Warby and James Temple 🐆

Smarter starters and better error handling, thanks to Fastify 4!

The Glitch community will no longer be able to use a Facebook account to log in to Glitch. If you created your Glitch account with Facebook, don’t fret, you will still be able to log in with the email address associated with your Facebook account. And if you don’t use Facebook, you don’t have to do anything!

Even better, you can use the handy Magic Link feature to update your Account Settings and change your password. 

The Glitch community has shown an overwhelming preference for other login services. This change helps us simplify the Glitch experience and more importantly, matches what our community has shared about their expectations for the platforms they trust. Creating and maintaining an inclusive environment where creators feel empowered to experiment and share is a responsibility we take seriously. 

Your trust is essential to us so we wanted to be clear about this change, and make sure you know you’ll always have access to your projects no matter how you log in.

Have features you’d like to see in Glitch? Let us know by sharing on the community forum.

The Glitch community will no longer be able to use a Facebook account to log in to Glitch.

A little poke: Still using Facebook login?

Right at the beginning of 2022, we launched an all-new editor for Glitch, with the promise of lots of improvements to come. So we’re excited to talk about how Fastly is powering some of the coolest new features.

If you don’t know Fastly, they’re a super popular, super powerful platform for delivering sites and apps more quickly, reliably and securely. So we started with what Fastly is best known for — their content delivery network, or CDN. Now, when you upload assets in the all-new Glitch editor, they’re automatically delivered by Fastly’s super-fast CDN, and you don’t have to do any configuration or additional deploy process. (It even works great with assets like 3D objects, which are newly supported in the Glitch editor!)

But what’s even more exciting is the possibilities this opens up for the future. Fastly has a really clever new edge platform called Compute@Edge that is lightning fast and will let you build smarter, more dynamic sites more easily than ever. We’re gearing up for being able to publish your Glitch projects to Fastly — including the long-awaited desire to have separate dev and production versions of your app, with deploy as simple as a click. When it all comes together you'll be able to publish lightning-fast static sites and Compute@Edge will let you build more sophisticated Glitch apps that scale infinitely — with 100x faster code execution startup times than other serverless solutions!

You can try out the fast new assets in the Glitch editor today, and then sign up to join the waiting list for the exciting beta preview to come!

We’re building an all new integration with Fastly's Compute@Edge that lets you build dynamic sites without the overhead of managing a server and lets you build more sophisticated Glitch sites that scale infinitely – we're talking 100x faster code execution startup times than other serverless solutions!

Taking your apps to the Edge: Fastly x Glitch

The web has been evolving since its earliest days—creativity and innovation drive that constant change. Through vision, code, and collaboration people reshape the web and create new experiences and sometimes even new genres. That idea of people building together is why we make Glitch, and why we’re excited to give you an early look at some work we’ve been doing which allows you to deploy to DigitalOcean straight from the Glitch editor, with one-click!

Glitch is the easiest way to build the web, but sometimes you need a little more after the build. Maybe your full stack app needs more compute power as it grows. Maybe that SQLite database is bursting at the seams and you need an upgrade to Postgres or MySQL. DigitalOcean has you covered. Just bring an API token, add it to your project’s .env file, and with a couple clicks you’ll deploy your app to DigitalOcean’s App Platform. The best part? Redeploying only takes a click, so you can keep building on Glitch and make your changes live on DigitalOcean any time you want. 

Getting started is easy! You’ll need a DigitalOcean account. If you don’t have one and want to try it out you can sign up here and get $100 in free credits for new accounts. On the DigitalOcean side all you’ll need to do is to create an access token. Then, in your project,  you just need to add your access token to your .env file as a variable called DIGITALOCEAN_ACCESS_TOKEN. Glitch will walk you through a couple quick prompts to get your project prepared and create a new app on App Platform. In just a minute, you’ll have your app set up for one-click deploy to DigitalOcean! 

Deploy a Glitch App on DigitalOcean

Want to learn more about the details of deploying to DigitalOcean? We’ve got a Help Center article all about it.

Our love of building together applies to Glitch, too. We share new features early because we want to evolve them along with the community. So we’ve created a playlist of apps to help you get started deploying to DigitalOcean and a form to collect community feedback. If you have a feature suggestion or you make an app that deploys to DigitalOcean we want to hear about it—we would love to feature it on the blog or in our newsletter. We can’t wait to see what you build with Glitch and DigitalOcean.

Glitch and DigitalOcean make deploying your apps even easier

We recently released Glitch in Bio, an easy to use, fully customizable link-sharing app. Since then we’ve been delighted and inspired by the amazing remixes you’ve been creating. We’ve also received lots of extremely useful feedback and suggestions for developing the project–which we couldn’t wait to get stuck into. We wanted to take advantage of how easy it is to iterate on this project and continue delivering enhancements.

You can now remix the first update of Glitch in Bio, improved by community contributions!

Connect to all of your networks more easily than ever, thanks to the newest social icons suggested or added by community members:

Mastodon courtesy of this @evermorian remix

Bandcamp both requested by @smilinggoat in the forum thread

Ko-Fi, also from Andy Piper who included incredibly helpful notes inside the project

Your Glitch in Bio page can better serve everyone in your audience thanks to all of these accessibility enhancements suggested by @pixely:

Increased contrast in the default ‘glitch’ theme

Image alt text – you’ll see a new property in ‘settings.json’ allowing you to add alt text to your images that will automatically be populated in the markup.

Focus states on links throughout the app for easier keyboard interaction

And finally, a few tweaks to improve the app UX:

Less flickery icons thanks to more consistent hover states

Better page descriptions on Twitter thanks to the ‘og:description’ update explained in Andy Piper’s fantastic blog post write-up of remixing the app

The remix button gets updated text with clearer language by @metamoar

If you already have a remix of Glitch in Bio and want to update it, visit the main project and grab the new parts:

Copy the content of layout/social.html into your own

In settings.json, add the icons you want in the ‘social’ object

Copy the content of public/styles/style.css (and public/styles/themes/glitch.css, if you’re using it)

Copy layout/links.html and layout/social.html for the alt text and keyboard focus. 

In settings.json include an ‘altText’ property for each link with an image you want to supply text for

Copy the content of layout/glitch-footer.html

In addition to theme remixes we’ve also been seeing some very interesting developments on the app functionality that we’ll also dive into soon! The project is completely customizable–check out the help docs for tips on how to edit your remix. And don’t forget your Gitch in Bio site is also a Progressive Web App (PWA) your users can install on their devices.

We’re not done! Keep sharing your feedback and submitting your Glitch in Bio templates and we’ll keep building this project together. 

Glitch In Bio, now community improved

With the launch of our new “Glitch In Bio” starter project, we’ve seen thousands of creators make link pages for their social media in an inspiring variety of ways. But there’s something interesting happening behind the scenes with Glitch in Bio that points to an exciting new opportunity for the open web.

PWAs, or progressive web apps, are a way of giving apps built on web technologies the same features and finishing touches as the native mobile apps we use on our phones and other devices every day. PWAs have been around for a while, but are still not as broadly adopted by users as they might be, because most of the time, it takes extra technical work to turn a regular web app or web page into a PWA. Often, that work falls onto the list of things we file under “I’ll do that later…”

The good news is, thanks to the defaults we’ve set on Glitch, every single one of the Glitch In Bio link pages that’s been built is already a PWA. It’s built right into the project. And it’s the first step on a larger path of giving every creator the benefits of PWAs without all the technical hassles of setup or configuration.

Having your app function as a PWA brings a number of advantages. 

Being a PWA makes your app installable on user devices vs just being accessible through the web browser. This creates a higher quality experience that’s more like native (and you can enhance it to leverage native functionalities like notifications).

PWAs are more discoverable because they’re shareable by link and easily optimized for search engines, as well as being available through app stores, which means you can make it discoverable to a whole new audience, and even optionally monetize it! 

Last but not least, PWAs create a more resilient and inclusive user experience because your content is cached for offline use, so users can still access them even with restricted connectivity. Since Glitch in Bio is a generated static site, it’s highly performant and delivers content to the user super quickly by default.

Your Glitch in Bio app is all set up to function as a PWA when you remix it, but you can of course edit or enhance its functionality. The site style is already responsive to display nicely on mobile devices, and will cache the default HTML and CSS.

There are only two additional files in your project, both inside the public folder:

manifest.json which specifies the metadata required for the app to function as a PWA, including icons and the start URL

sw.js–the service worker, which specifies caching behavior for the app, including when the user is offline

Your project’s HTML page head imports both of these, in layout > head.html. To see the PWA behavior in action, open your browser dev tools and choose Application.

Your project will work out of the box as a PWA, but as you edit your Glitch in Bio project, there are a couple of details you might want to further customize in the PWA settings:

Icons: If you add your own images, including them in the list of cached files in sw.js will make them available for offline use

Metadata: If you take a look in manifest.json, you’ll see the settings that’ll determine how the app functions when installed on a user device, so you can update the text and images to suit your project

Files: If you use additional files such as your own CSS theme, add them to the list in sw.js for caching too

If you want to take things even further, you can submit your PWA to any app stores that serve your audience. There are simple instructions for submission to the Google Play store for ChromeOS, the Windows App Store, and even open source tools that will help you submit a PWA to the iOS App Store.

There are also lots of options when it comes to PWA behavior–your Glitch in Bio site will initially attempt to fetch the page from the web and only use the cache if there is no response. This is known as “network falling back to cache” but you can alter it to suit your own needs: check out the Google Developer guidance for more.

If you customize or extend the PWA component in your Glitch in Bio remix please let us know about it! We're eager to share your creativity with the rest of the community. You can also join the community in the Glitch forum to talk through your ideas for your page.

Revealed: Your Glitch in Bio page is a PWA!

As they say, and now for something completely different. Today, we are excited to share with you the latest from the Glitch lab: Glitch In Bio. It’s unlike any other Glitch launch we’ve done before—we built a mobile-friendly, free, fully customizable landing page to use as your “Link in bio.”

➡️ Start creating your own Glitch In Bio by remixing the Glitch In Bio app right now!

If you’ve spent any time on Instagram or TikTok or Twitch, you’ve seen people using various tools to create link pages. So how is this different? Glitch In Bio lets you direct traffic to a single link without limiting how you can share, create or customize. Since Glitch runs real apps, you have the ease of instantly publishing your links, without sacrificing access to all the parts of the web that you want to share with the world. Popular tools for building bio links severely limit what you can include and how you can customize. They even sometimes make you pay just to link to things you want to show off! Glitch In Bio lets you include anything the web can do, for free.

We have a lot of fun things in store for Glitch In Bio to help all kinds of creators promote their links, including:

Free extensions to the app that cater to the different needs of the community: analytics that you own, donation widgets, custom themes, ways to show off your favorite media, and more.

Tutorials to show how to make your Glitch In Bio really your own, regardless of how many lines of code you’ve written before.

Get started creating your own Glitch In Bio by checking out our featured playlist of Glitch In Bio remixes from the community! If you have a theme or addition you want to show off, we'd love to see it. Just share it with us using this form, and we’ll be featuring the best customizations right here on Glitch.

Announcing Glitch In Bio, the easiest way to share your links!

Today, we’re introducing Playlists to Glitch — bringing all the power of organizing, sharing and discovering new apps, in a way that’s as familiar and fun as the playlists you use to manage music, videos, or anything else. (And good news: we’ve migrated all existing Collections on Glitch to be playlists, so there are already over 100,000 to explore!) 

Remember making a mixed tape? Or burning a CD with your favorite songs on them? Or—what’s the modern-day equivalent—creating a playlist on your favorite streaming app? Playlists are as fun to make as they are to receive. Both activities are labors of love and creativity. Most importantly, playlists are an instrument to help our community’s projects reach the people who would most find joy in using them.

Glitch is built around an important idea, that creating and sharing apps is as important as creating and sharing photos, documents, videos or anything else. So of course it should be just as fun and easy! So that’s why we’ve created playlists. Borrowing from the familiar metaphor we’ve all come to know, playlists of apps make it easy to share a collection of apps or projects while adding useful context, for yourself or for others.

The first thing you need to know about playlists is you don’t need to know how to code to create and curate playlists. In fact, being a playlist curator is a great way to be a creator on Glitch, just like making apps is. You get all the same joys of sharing creativity with the world and doing something helpful for the community, and the opportunity for others to thank you for sharing.

Each playlist features newly styled project cards stacked vertically in the order of your choosing. To the right of the cards, curators can add notes on any app in a playlist, to explain why the app is useful, or just to help you remember what you liked about a project you saved. 

Don’t forget to give your playlist a title. You can also add a description at the top, to help describe what colleagues and community members can expect from your playlist. Maybe it’s a themed playlist, or a series of tutorials, or just a collection of your greatest hits!

Play mode: To make it even easier to discover apps in playlists, we’ve made a playback mode where you can walk through all the apps in a playlist. It’s perfect for learners who want to step through a list of related apps, or just to check out a series of projects for inspiration.

Playlist curation is a great way to organize your profile, collect apps from the rest of the community, and share Glitch apps with others. That’s why we wanted to make it even easier to highlight creators. At the bottom of each playlist you curate, people will be able to see other apps and projects you’ve built. And it’s easier than ever to show the love! You can thank playlist creators right from the playlist, just like you can thank app creators everywhere on Glitch. It’s a nice way to make their day brighter, and yours too!

If you poke around Glitch.com, you’ll see some other updates.

Creating playlists is one way to update your Glitch profile, but we wanted to make it all look snazzy. Each individual project page has been updated to reflect the new card styles presented in playlists, as well as highlights the additional apps or projects a project creator has built, making it even easier to surface great apps from the Glitch community. The new cards style for projects also now show up in search results.  Lastly, on keeping things cool: As always, we care about keeping Glitch a friendly and welcoming place for everyone, so we’ve made it simpler than ever to flag things on Glitch that might be potentially troublesome. Click the report abuse button to flag anything that’s not up to our community standards.

In order to spark creativity or maybe just pique your curiosity, we’re sharing some playlists the Glitch team put together to help get you started.

But that’s not nearly enough examples, so here are some playlists from the Glitch community we think are pretty great. 

Things to make and do with Vue.js by @stegriff

Six Superb Sunday Sites by @jhnbngtssn – Read our interview with John to learn about Sunday Sites - maybe your app will end up on this playlist!

Art or math? by @rowan-m poses (and possibly answers) the most important question in computer science. 

There’s a lot more in store for the Glitch community this fall, but we’re very excited to see what you’ll do with playlists. Playlists give us at Glitch an opportunity to showcase more of your creations to the rest of the world, too, including on /create-project and even in search results! So get out there and create some playlists, friends, and share your favorites with us at community@glitch.com, on Twitter at @glitch, and on the Glitch forum.  ☺️

Today, we’re introducing Playlists to Glitch — bringing all the power of organizing, sharing and discovering new apps, in a way that’s as familiar and fun as the playlists you use to manage music, videos, or anything else.

Introducing Playlists, the best way to curate and share Glitch apps!

One of the best parts of Glitch is that you can go from idea to sharing in seconds, and we’re always on a quest to further improve your time-to-hello-world without complicated tooling or lock-in. Last year we launched the Glitch.new shortcut to help that cause. Since then, we’ve seen thousands of apps created with Glitch.new, as well as an overwhelmingly positive response from the community!

Now, thanks to all of your excellent feedback and shortcut requests, we’re excited to announce an entirely new Glitch.new.

Now, starting up your next React app is now as simple as going to glitch.new/react. And there are similar shortcuts for all the most popular frameworks used to build on Glitch!

But what if you don’t see your favorite framework? We’ve got you covered! You can create a shortcut for any public project on glitch by using glitch.new/~[project-name]. 

Plus, here’s one more superpower: You can use glitch.new to import from GitHub. Just put glitch.new in front of any GitHub repo URL in your browser, and you’ll instantly have that repo imported and running on Glitch.

More shortcuts mean more kinds of developers can get to “hello, world” faster. We can’t wait to see what you create with the new Glitch.new, built for and inspired by feedback from the friendliest community of coders.

Have an idea for a great shortcut to add to Glitch.new, let us know in the Glitch forum! 

Just launched: a whole new glitch.new shortcut, that makes it faster and easier than ever to create any kind of app instantly in your browser. Make a new full stack React or Eleventy app, remix any Glitch app, or even import a GitHub repo, all just by typing glitch.new.

Glitch.new (and improved!) shortcuts

He also serves on the boards of the Electronic Frontier Foundation and the Data & Society Research Institute, and was formerly a contributing editor of WIRED. He’s been blogging since 1999 and won’t stop telling people about that one time he was on the Desus and Mero late-night show.

Incidents

The Workers Who Keep the Web Safe in an Unsafe World

Animal Crossing Helped Me Get Back to Real Life

New Rules of the Classroom: Remote Teaching in the Age of Covid-19

Better Tech: Why We Need Calm Technology Now More Than Ever

Function with Anil Dash

Open World is a fiction anthology podcast about how science and technology serve as a backdrop for imagining a better future, helping us envision the positive influence that science and tech can play in a real future. 

Open World is produced by Keisha "TK" Dutes and hosted by critically-acclaimed podcaster Rose Eveleth, for Glitch. By speaking to the pressing concerns of our times through love, friendship, community, compassion, and sustainability, the host will help listeners imagine new ways forward into a future that is less scary and more positive, and something we can start working on constructively.  

Open World launches weekly episodes in Spring 2020. Want to contact the show? Email youropenworld@glitch.com.

Open World

Shift Shift Forward is a podcast that showcases everything that makes Glitch the best place to create on the web. We’ll talk to some of our top creators, explore cool apps, and even hear from the people who work at Glitch!

Shift Shift Forward

From idea to code in seconds, build and learn alongside the most creative coders on the Web

Product Updates

You Might Also Like