Update codesandbox template automatically

Description

Right now we have to update the codesandbox template manually. It’d be update it automatically each time we release a new version.

User stories

As a Frontity developer
I want to use always the latest versions on codesandbox,
so that I can test my code with the latest Frontity version.

As a core developer
I don’t want to manually update the codesandbox template on each release
so that it’s always up to date.

This feature depends on the next ones:

We’ll keep you posted on this topic once they are released and this feature is available.

I’ve been testing this because Codesandbox now supports using GitHub repositories as templates changing the github.com domain with a githubbox.com domain.

The only thing a Frontity project needs now is a sandbox.config.json file with this configuration:

{
  "template": "node"
}

I’ve added it to the Frontity Chakra theme:

It works great.

I’ve also asked if they plan to add support for this configuration in the package.json file. If they do, maybe we could add it to the package.json we generate with npx frontity create and that would make every Frontity repository a codesandbox template.

We still need to figure out how to keep our own repos/templates up to date (what this Feature Discussion is about).

1 Like

@documentation-team maybe you could add the sandbox.config.json file to all our demos and a link to “Edit it in Codesandbox” like what we have in our website.

What do you think?

@juanma has already opened an issue for this: https://github.com/frontity/docs/issues/158 :clap::clap:

If you have any problems let me know.

I’ve added another one to add a section to our (already awesome) “How to share your Frontity project” guide: https://github.com/frontity/docs/issues/159

By the way, our template was way out of date so I’ve just updated it: https://github.com/frontity/frontity-codesandbox

Hopefully we can do something to automate this in the future :slightly_smiling_face:

EDIT: This link can be used to start it: https://githubbox.com/frontity/frontity-codesandbox

Done! More details at: https://github.com/frontity/docs/issues/158#issuecomment-689404377

Awesome :clap: :smiley:

Hey, I was playing with our codesandbox yesterday (actually, to make a demo to respond a user in the community) and I stumbled upon this issue again. The last time the repository was updated was in Oct 5, 2020…

If we don’t update the yarn.lock file regularly, the codesandbox instances always install the old packages. And it’s not easy to update all of them manually in codesandbox. First, you have to fork the codesandbox instance, then open a new terminal, run yarn upgrade and finally restart the container. That’s something we cannot ask people to do, and also I’m a bit worried – now that we are gaining visibility – about people trying out Frontity in codesandbox and facing old bugs or wanting to try new features that are not in old packages. :worried:

I guess we should keep this in mind and update yarn.lock everytime we do a new package release, right? Just including this in our release process, either manually or automatically.

cc: @SantosGuillamot

Yes, it would be nice to automate this. Any ideas how to do it?

I was considering a couple of options but I am not sure if they could work:

  1. Include the codesandbox in Frontity repo projects. Do you know if it would be possible to run automatically a codesandbox if it’s there?

  2. Create a GitHub Action in frontity-codesandbox repo and connect it to our release workflow in the main frontity repo. It seems it could be done, as explained here, using repository_dispatch.

Any thoughts or ideas?

Actually, it’s possible! :tada:

If you go to https://codesandbox.io/s/github/frontity/frontity/tree/master/projects/mars-theme, the code you see in codesandbox is the one inside /projects/mars-theme, from the master branch.

We can include the codesandbox project inside /projects and add an automation to the github workflow to run yarn upgrade in that project and commit the changes each time we do a new release.

I think this approach would be simpler than the other one. :slightly_smiling_face:

EDIT: Not so fast, we cannot run yarn upgrade if the packages haven’t been released yet. :upside_down_face:

Another possibility would be to simply remove the yarn.lock file.

I think that should work, because we already have other projects without that file (e.g. GitHub - frontity-demos/tutorial-hello-frontity) that can be open in codesandbox with no problem.

@juanma @mburridge : what’s your opinion? You have more experience than us with codesandbox :slightly_smiling_face:

Also, I guess it would be great to have a default template that starts with Mars Theme, but it would be also great to have a list somewhere of all the other themes and demos that we have, right?

So it would be great to figure out this not only for the default template but for the rest of the projects/demos as well.

In the meantime I have removed the yarn.lock file and updated the packages in GitHub - frontity/frontity-codesandbox: Starter template for codesandbox.io as suggested by @david.

1 Like

I think the simplest solution is just to remove the yarn.lock file (as you’ve already done)

We have already this repo with several demos. Each demo has its own link to codesandbox. One of the goals of this Q is improving these demos and their visibility

1 Like