Setting up your own CodePen server

CodePen is an amazing tool. Some of the stuff that is created over there, is simply flabbergastingly cool – Which of course is a testimonial to the collaborative nature of the web and open source. However, every now and then, you need to create stuff in privacy, that you don’t want to share with anybody, except maybe a few selected individuals. An example could be a designer’s portfolio, or a set of reusable JavaScript classes, which you don’t want to share with the world for some reasons. An obvious example could be work done for a client.

For such cases there’s always Hyper IDE. Hyper IDE is an Open Source development environment, which among other things allows you to create JavaScript, HTML and CSS – Arguably giving you your own private “CodePen” server, from where you can securely share out folders, to others, by giving them their own username/password combination, only allowing them to see the contents of some specific folder.

The use cases are obvious. If you check out my test folder on my own installation, you can create and edit HTML, JS and CSS files. If you try to do the same in my modules folder, you will be denied write access. Setting up a folder such that only some specific role(s) are allowed to view its content, effectively password protecting parts of your content – Is obviously also easily accomplished. Just try out to see the contents of this file, and you’ll see how you are denied access to even read it. If I visit the same link, I of course have full access to read its content. Sending links to clients and colleagues, to specific files in your own CodePen server, is obviously easily accomplished. And sending a direct link to them, for them to see the results of the page, is also obviously easily accomplished.

Install your own CodePen server here. If you need help to set this up, feel free to ask me a question over here.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.