feat(v2): official CodeSandbox support #3717

sammychinedu2ky · 2020-11-10T11:32:35Z

Motivation

I saw an issue on adding Codesandbox config for Docusaurus which would enable the creation of Codesandbox templates for Docusaurus.
So I decided to work on that.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

I added a dev script to the package.json file and a sandbox.config.json file for each template under the examples folder
I made use of the classic template to create a docusaurus template on codesandbox. You can check it out using this link https://codesandbox.io/s/docusaurusclassics-xekwd
I generated the examples folder using this script
mkdir -p examples && cd examples && rm -rf * && npx @docusaurus/init@next init classic classic && npx @docusaurus/init@next init facebook facebook && npx @docusaurus/init@next init bootstrap bootstrap
Then added the dev script and sandbox.config.json file manually

Related PRs

#3702

netlify · 2020-11-10T11:39:21Z

Deploy preview for docusaurus-2 ready!

Built with commit 3868e8f

https://deploy-preview-3717--docusaurus-2.netlify.app

slorber · 2020-11-12T16:51:59Z

Your codesandbox seems to work, but for merging this I'll need:

to have a script in monorepo root package.json that "regenerates" the examples
not using npx @docusaurus/init@next init because this will fetch the init cli script from npm. We'd rather ensure that we use the locally build init script to be sure to run the latest one. If I'm on a branch doing local modifications to a template, I should be able to run the regenerate command and see my template modifications appearing immediately in the examples, so that my PR include the updated examples immediately.
CI tests must pass. If ESlint complains because of the missing FB header, add the failing paths to .eslintignore

Please explain with all the details how did you create that codesandbox template. I must be able to test your whole workflow, considering I know nothing about codesandbox.
I tried to import your fork's URL on Codesandbox, but it didn't work and I have no idea what to do about it.
Also, it's unclear to me how Codesandbox understand which theme it should run.

Please document the whole workflow I need to follow to validate that your work is fine and ready to be merged. Don't assume I know Codesandbox at all, because you probably know more than me

sammychinedu2ky · 2020-11-12T16:56:09Z

Ok cool would work on a script that generates it without npm.
It won't work from my forks URL because I made use of the myforksurl/examples/classic as the entry point on code sandbox

sammychinedu2ky · 2020-11-12T16:57:15Z

Would detail everything once I make a script

slorber · 2020-11-12T16:57:51Z

Thanks, It looks like indeed importing an url like https://github.com/sammychinedu2ky/docusaurus/tree/master/examples/facebook seems to work better :)

sammychinedu2ky · 2020-11-12T17:00:13Z

Yes that's is because the entry point has less than 500 modules
But my question is should I create a file specifically for the script .. or should I use the packages docusaurus command to do it locally?

slorber · 2020-11-12T17:07:36Z

Not sure it's the best way, but it seems the following work: node ./packages/docusaurus-init/bin/index.js init examples/classic classic

You could add scripts in root package.json that just do that + cleaning folder + copy the required json file

sammychinedu2ky · 2020-11-12T17:16:20Z

Ok thanks would do that🙌🙌

…

On Thu, Nov 12, 2020, 6:07 PM Sébastien Lorber ***@***.***> wrote: Not sure it's the best way, but it seems the following work: node ./packages/docusaurus-init/bin/index.js init examples/classic classic You could add scripts in root package.json that just do that + cleaning folder + copy the required json file — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3717 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIUKTHHFVWIN5FCIXKIMOWLSPQI6PANCNFSM4TQRLGKQ> .

sammychinedu2ky · 2020-11-13T09:31:24Z

I've added a script for that in the package.json file (examples:generate)

slorber · 2020-11-13T13:55:21Z

examples/classic/package.json

-      "last 1 safari version"
-    ]
-  }
+ "name": "examples-classic",


why use 1 space indentation?

Sorry about that would change it to 2

slorber · 2020-11-13T13:56:56Z

sandbox.config.json

+    "hardReloadOnChange": true,
+    "view": "browser",
+    "template": "node"
+}


can you generate it in the script instead?

Yh sure let me do that

slorber

Thanks, that looks great but can't run yarn examples:generate twice without error (need to cleanup)

sammychinedu2ky · 2020-11-13T20:34:55Z

Thanks, that looks great but can't run yarn examples:generate twice without error (need to cleanup)

OK let me work on that

merged

fix:added support for cleaning

sammychinedu2ky · 2020-11-13T22:11:57Z

I've worked on the fix. Everything is working now.

slorber

Thanks for your work, going to merge it.

I did some changes on your code because:

you reverted some important package.json changes
your cleanup of example folder did not work reliably
some ESLint rules didn't pass
all files should have the FB copyright header
the node init script should rather forward its logs to parent process, so that users knows something is happening

Otherwise it works fine.

I'd recommend checking your Github workflow, because it's really bad if you end up reverting some changes others have done in your PR, like it happened here

slorber · 2020-11-16T14:56:15Z

package.json

@@ -40,7 +41,7 @@
    "test": "jest",
    "test:build:v2": "./admin/scripts/test-release.sh",
    "watch": "yarn lerna run --parallel --no-private watch",
-    "clear": "yarn workspace docusaurus-2-website clear && yarn lerna exec --ignore docusaurus yarn rimraf lib",
+    "clear": "yarn workspace docusaurus-2-website clear && yarn lerna exec 'yarn rimraf lib' --ignore docusaurus",


this should not be in your PR

slorber · 2020-11-16T14:56:18Z

package.json

+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/preset-typescript": "^7.9.0",


this should not be in your PR

sammychinedu2ky · 2020-11-16T15:23:35Z

thanks a lot, Sir, I'm grateful for the corrections but I tried pulling from the master branch before creating a new branch locally to work on. I think I made a mistake in that.
But is there any other thing that made the pull request revert changes others have done?

sammychinedu2ky · 2020-11-16T15:26:18Z

Thanks for merging this pull request too 😁

slorber · 2020-11-16T15:58:14Z

NP

I don't know exactly what happened 😅 just know that some diff was bad and had to manually revert it.

Can you try to document this new Codesandbox support? In Readme and docs etc?

(just wait until I merge #3760)

sammychinedu2ky · 2020-11-16T16:14:56Z

NP

I don't know exactly what happened just know that some diff was bad and had to manually revert it.

Can you try to document this new Codesandbox support? In Readme and docs etc?

(just wait until I merge #3760)

Ok sure would do that. Thanks again 😁

bravo-kernel · 2020-11-18T19:00:31Z

Awesome addition 👏

* feat:added support for codesandbox * added sandbox config file * feat:added script to generate template for codesandbox * added examples:generate script to package.json file * added failing path to eslintignore * added script to eslintignore * added cleaning feature to script * deleted sandbox script in root * changed comment in codesandboxscript file * update codesandboxscript.js + revert bad package.json changes * eslint should check codesandboxscript Co-authored-by: slorber <lorber.sebastien@gmail.com>

feat:added support for codesandbox

4a6797c

facebook-github-bot added the CLA Signed Signed Facebook CLA label Nov 10, 2020

sammychinedu2ky mentioned this pull request Nov 11, 2020

[v2] Proposal: Official CodeSandbox Template #1699

Closed

slorber added the pr: new feature This PR adds a new API or behavior. label Nov 12, 2020

slorber changed the title ~~feat:added support for codesandbox~~ feat(v2): added support for codesandbox Nov 12, 2020

slorber linked an issue Nov 12, 2020 that may be closed by this pull request

[v2] Proposal: Official CodeSandbox Template #1699

Closed

sammychinedu2ky added 5 commits November 13, 2020 07:03

Merge https://github.com/facebook/docusaurus

d390eb3

added sandbox config file

b197406

feat:added script to generate template for codesandbox

0f7529f

added examples:generate script to package.json file

d931386

added failing path to eslintignore

f67db98

added script to eslintignore

2a5776e

slorber reviewed Nov 13, 2020

View reviewed changes

slorber requested changes Nov 13, 2020

View reviewed changes

sammychinedu2ky added 5 commits November 13, 2020 21:43

Merge https://github.com/facebook/docusaurus

086cd7b

merged

added cleaning feature to script

23d2774

deleted sandbox script in root

a7cf6b6

changed comment in codesandboxscript file

a5dacb0

Merge branch 'sandbox'

bd3122a

fix:added support for cleaning

slorber approved these changes Nov 16, 2020

View reviewed changes

slorber added 2 commits November 16, 2020 16:03

update codesandboxscript.js + revert bad package.json changes

691d347

eslint should check codesandboxscript

3868e8f

slorber changed the title ~~feat(v2): added support for codesandbox~~ feat(v2): official CodeSandbox support Nov 16, 2020

slorber merged commit bb33f54 into facebook:master Nov 16, 2020

lex111 added this to the v2.0.0-alpha.67 milestone Nov 17, 2020

This was referenced Jan 19, 2021

Added reference to use the codesandbox template #4061

Closed

docs(v2): Add codesandbox integration #4062

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v2): official CodeSandbox support #3717

feat(v2): official CodeSandbox support #3717

sammychinedu2ky commented Nov 10, 2020 •

edited

Loading

netlify bot commented Nov 10, 2020 •

edited

Loading

slorber commented Nov 12, 2020 •

edited

Loading

sammychinedu2ky commented Nov 12, 2020 •

edited

Loading

sammychinedu2ky commented Nov 12, 2020

slorber commented Nov 12, 2020

sammychinedu2ky commented Nov 12, 2020

slorber commented Nov 12, 2020

sammychinedu2ky commented Nov 12, 2020 via email

sammychinedu2ky commented Nov 13, 2020

slorber Nov 13, 2020

sammychinedu2ky Nov 13, 2020

slorber Nov 13, 2020

sammychinedu2ky Nov 13, 2020

slorber left a comment

sammychinedu2ky commented Nov 13, 2020

sammychinedu2ky commented Nov 13, 2020

slorber left a comment

slorber Nov 16, 2020

slorber Nov 16, 2020

sammychinedu2ky commented Nov 16, 2020

sammychinedu2ky commented Nov 16, 2020

slorber commented Nov 16, 2020

sammychinedu2ky commented Nov 16, 2020

bravo-kernel commented Nov 18, 2020

feat(v2): official CodeSandbox support #3717

feat(v2): official CodeSandbox support #3717

Conversation

sammychinedu2ky commented Nov 10, 2020 • edited Loading

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Related PRs

netlify bot commented Nov 10, 2020 • edited Loading

slorber commented Nov 12, 2020 • edited Loading

sammychinedu2ky commented Nov 12, 2020 • edited Loading

sammychinedu2ky commented Nov 12, 2020

slorber commented Nov 12, 2020

sammychinedu2ky commented Nov 12, 2020

slorber commented Nov 12, 2020

sammychinedu2ky commented Nov 12, 2020 via email

sammychinedu2ky commented Nov 13, 2020

slorber Nov 13, 2020

Choose a reason for hiding this comment

sammychinedu2ky Nov 13, 2020

Choose a reason for hiding this comment

slorber Nov 13, 2020

Choose a reason for hiding this comment

sammychinedu2ky Nov 13, 2020

Choose a reason for hiding this comment

slorber left a comment

Choose a reason for hiding this comment

sammychinedu2ky commented Nov 13, 2020

sammychinedu2ky commented Nov 13, 2020

slorber left a comment

Choose a reason for hiding this comment

slorber Nov 16, 2020

Choose a reason for hiding this comment

slorber Nov 16, 2020

Choose a reason for hiding this comment

sammychinedu2ky commented Nov 16, 2020

sammychinedu2ky commented Nov 16, 2020

slorber commented Nov 16, 2020

sammychinedu2ky commented Nov 16, 2020

bravo-kernel commented Nov 18, 2020

sammychinedu2ky commented Nov 10, 2020 •

edited

Loading

netlify bot commented Nov 10, 2020 •

edited

Loading

slorber commented Nov 12, 2020 •

edited

Loading

sammychinedu2ky commented Nov 12, 2020 •

edited

Loading