This week, Joel Sposky announced HyperDev, a playground for building and launching web apps quickly. As I spend much of my time building test apps with Stormpath, I thought I’d try it out.

Trying out HyperDev, I was super impressed! Their starter project was really easy to use, and on every keystroke, HyperDev automatically redeployed and refreshed my web app so I could see the results live. Using npm to add packages was super quick as well; the packages installed before I could even finish writing the require statement! Currently, HyperDev only supports Node.js, but support for more languages are coming soon.

Saving User Data in HyperDev with Stormpath

My only disappointment with HyperDev? There’s no persistence layer, so to store data, you need to set up an external database, write code to connect to your database and more. But sometimes, all you want to do is let users log in and save some data!

Fortunately, I work at Stormpath, an authentication service that allows you to easily set up login and registration, as well as save user data to our API.

So, I copied the express-stormpath sample project and set it up in HyperDev. Want to check it out? Check out the code, or see the published site! You can log in, edit your profile data, and see the code that’s running the site.

Editing Code in HyperDev

And if you want to try editing your own? It’s simple! There are only three steps:

  1. Remix the Stormpath sample project (this link creates a private copy of my code!)

  2. Sign up for Stormpath

  3. Log in to the Stormpath Admin Console, get your API Keys from the Node.js quickstart, and add them to your .env file.

And you’re done! Click on the “🕶 Show” button in HyperDev to view your site, live!

Requiring Login with Stormpath Middleware

The sample project is a great way to get started, but there’s a lot more Stormpath can do to help you build an awesome HyperDev app.

Stormpath’s Express integration allows you to protect access to your routes via middleware. Using the stormpath.getUser or stormpath.loginRequired middleware, you can look up the current user or redirect a user to the login page automatically for your routes! Try adding the following code in server.js, and then visiting the /public-page or /protected-page routes!

While you’re not logged in, /public-page will display “Hi, Anonymous!”, but when logged in, it’ll display your first name. Similarly, /protected-page will require you to login before viewing it.

Saving User Data

Each user also have a customData object attached to it, which you can use to store arbitrary JSON data. Try it out:

If you go to /activity-counter while being logged in, you’ll be able to see how many times you’ve visited the webpage!

Saving Application Data

The Stormpath Application object also has customData attached to it. However, since it can be up to 10MB, it’s not pre-loaded, so you need to specifically request it from Stormpath to use it. Otherwise, you use it the same way:

Now, if you go to /global-counter while being logged in, you’ll be able to see how many times everyone has visited the webpage!

Next Steps

Woohoo! Now that you’ve learned how to use Stormpath in HyperDev, you can now build fully functional apps with persisted user and app data quickly and easily! What’s next?

Keep Playing Around With HyperDev! HyperDev makes it really easy for you to prototype and build something new with Stormpath. Build something awesome? Share it with us! Tweet @goStormpath or @EdwardStarcraft to show us what you got!

I like what you got!

Read the Express-Stormpath Documentation! Express-Stormpath is capable of doing a lot more than just rendering the login / logout pages! Check out the documentation.

Try a Tutorial! Want to learn how Express-Stormpath works from scratch? Or building a REST API for your mobile apps? We’ve got you covered!

Talk to Us! We’re proud of the exceptional level of support we provide our community, and would love to hear from you about your project! Please don’t hesitate to contact us at [email protected], file an issue against one of our GitHub projects, or leave a comment below.