Codesandbox-client: Adding Gatsbyjs project support

[Khaledgarbaya]

Hey, Folks, I would like to add Gatsby project support.
This will help users who are new to Gatsby and get them going very fast.
Is this something that you consider a fit for codesandbox?
I already started hacking around a version of that, you can find it here but I am having some issues with the routing, mainly because of I still don't the get the full picture of the system.

[CompuIves]

Wow, this is super great @Khaledgarbaya! I'm really impressed that you found all the steps to implement a new template without any documentation.

We've been talking with @gatsbyjs about implementing Gatsby in CodeSandbox. This one is a bit tricky, because the fundamentals of Gatsby rely a lot on Node utilities. We certainly want to do this though, so we're now working on a solution that will allow sandboxes to be run externally on a separate server so we can get Gatsby support.

Your branch is very good to build upon, I'll keep this issue updated with our progress on Server Side Evaluation and will let you know when we can update your branch with that functionality 😄.

[Khaledgarbaya]

@CompuIves Thanks for your comment, still didn't grasp how you would run Gatsby there, I thought It would be easy as it is similar to create-react-app as one dependency for building etc...
I'll be more than happy to help with the integration just let me know.

[lbogdan]

@Khaledgarbaya Gatsby runs in a Node.JS JS environment and heavily depends on its APIs (think filesystem, net, stream etc.). As CodeSanbox's runtime runs everything in the browser JS environment (that doesn't have those APIs), it cannot properly support Gatsby right now. The reason React, Vue and the other templates work in CodeSandbox is due to @CompuIves' efforts to adapt them to work in the browser, which in itself is a very tedious process, and might even be impossible for Gatsby support.

So, in order to make Gatsby work (and other frameworks that run in, and heavily depend on, a Node.js environment - Next.js, Nuxt.js), we'll run them in a Node.js enviroment on an actual server, with CodeSandbox being a remote IDE, with which you will be able to edit the sandbox files and see the result in the preview window in real-time.

[Khaledgarbaya]

This is Supported now with the new Server side evaluation feature.
Good job everyone