In this article, I introduce my new service named LimeGreenJS and the basic usage of it. The target readers are those who start learning GraphQL and Apollo.

Background

Building a development environment for React apps is an enormous task for beginners. Tools like create-react-app help a lot, but I want something more specialized for GraphQL. Furthermore, what I think is very important is to deploy apps so that you can allow someone to use them. Remembering back in time, Meteor offered a nice deployment service, which you can deploy your app just by one command. That was extremely handy for learning Meteor and also for publishing a relatively small app.

My solution

LimeGreenJS is a web service to run an app whose code is in a GitHub repository, without any configurations. It’s analogous to RawGit in a sense. Currently, it assumes the app is developed with React Apollo stack, and related packages are included in the system. It also includes official example apps that is maintained to work properly in the system. This makes the service as a repository of React-GraphQL example apps. Once we have enough examples, we could organize them as a tutorial.

To rephrase what LimeGreenJS is, it is:

A tool to run a React-GraphQL app in GitHub

A repository of React-GraphQL example apps

A deployment service for small production apps

How to use LimeGreenJS

At first, let’s see some official apps. Open the LimeGreenJS site and look for “hello-world” which is the first app you want to see. It’s just a React app without GraphQL. What you can do with it is “Run App” and “Show code” only. You can try other official apps, for example “simple-blog” is a minimal example of React-GraphQL.

Next, if you log in with your GitHub account, you can see apps in your repository and all apps if you want. You can fork some of the official apps, and you should see them in your repository. You can modify the code and run it by LimeGreenJS. (Limitation: At the point of writing, you need to refresh the page to reflect the change in your repository. This should be fixed in the future.) Now, you want to try forking the app “hello-world” and see how it works.

You can edit your code by the built-in editor in GitHub, but once you are used to it, you probably edit your code in your local editor and you probably want to run the code without the LimeGreenJS site, because that requires git commit and push. LimeGreenJS provides a CLI tool to run apps locally, just like create-react-app.

npx limegreenjs dev

Run this command in your checked-out directory. It assumes to have npx which is bundled with npm5.

Some other notes

If you put “LimeGreenJS-enabled” in the description of your GitHub project, it will be listed in LimeGreenJS.

LimeGreenJS does not provide GraphQL backend, and expects to use existing BaaS such as Graphcool and GraphCMS.

The app URL generated by LimeGreenJS is based on the git commit id, so it’s technically cachable.

For the next step

I only described the basic usage in this article and I may post follow-up articles later because some of information could have simply dropped in this article.

I would appreciate for any feedback. For the LimeGreenJS core system, I made the issues project in GitHub. So, please feel free to file an issue there. Other comments are also welcomed in Medium or Twitter.