Using create react app in CoCalc

You can get started with React.js development in a CoCalc project using create-react-app, as follows.

1. Make sure your project has the network upgrade, so that you can install external packages.
2. Click +New -> Terminal, then type npm create-react-app my-app, as explained on the React website:

~$ npx create-react-app my-app
...

3. Edit my-app/package.json and add a "homepage" entry, so it will look like this:

{
  "name": "my-app",
  "homepage": "/f94be775-2007-4c48-a152-e5e9ee2a8569/port/3000/",
  "version": "0.1.0",
...

IMPORTANT: You must replace f94be775-2007-4c48-a152-e5e9ee2a8569 with the id of your project, which you can find in the URL, or by inspecting the COCALC_PROJECT_ID variable in a terminal:

~/my-app$ echo $COCALC_PROJECT_ID
f94be775-2007-4c48-a152-e5e9ee2a8569

4. Start the dev server:

~/my-app$ npm run
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/f94be775-2007-4c48-a152-e5e9ee2a8569/port/3000
  On Your Network:  http://192.168.86.20:3000/f94be775-2007-4c48-a152-e5e9ee2a8569/port/3000

IMPORTANT: Replace http://localhost:3000 by https://cocalc.com in the above URL (and of course the project id will be different for you), and visit that page, so for me it is:

   https://cocalc.com/f94be775-2007-4c48-a152-e5e9ee2a8569/port/3000

You should see the React logo and the instructions "Edit src/App.js and save to reload.". 5. Indeed, start editing src/App.js in CoCalc, save it, then refresh your browser at

    https://cocalc.com/f94be775-2007-4c48-a152-e5e9ee2a8569/port/3000

to see the new version of the page.

Caveat

• Hot module reloading doesn't work, because the websocket connection isn't properly created. This bug is relevant.