Create React App Support

Hi guys, I wanted to create a React App with create-react-app. Unfortunately I wasn’t able to install the package globally and couldn’t use it.
It would be nice if somebody got this default app working, for requirements check this post from Dan:

One other thing that would be nice to have in this regard would be to push the build folder (or any other configurable folder) directly to the gh-pages branch in github so we can use github hosting but edit our websites here.

1 Like

Hi Spreadyy,

you don’t need to install the package globally, you can install it without the -g switch and we will handle the PATH for you.

I’ve made a barebone create-react-app application: https://glitch.com/edit/#!/create-react-app-sample feel free to remix it.

1 Like

Awesome :slight_smile:, thank you for the example!

One question remains: Can I publish a build folder to github?

1 Like

Not at the moment - you can just export your project, not a specific folder but we’ll add a feature request for it.

1 Like

I made an example to show how I published to GitHub pages with Travis CI:
glitch.com/edit/#!/react-app-github-pages

1 Like

I have a related question—did something change in how you handle restarts? There used to be an issue where npm start would get killed on every file change, leading to very slow rebuilds, but it appears fixed now. Curious if this was fixed intentionally, and what is the heuristic Glitch uses to choose whether to kill the process or not.

Ah, never mind, there’s a watch.json file there. Most people wouldn’t know to put it there, leading to bad experience with Create React App in Glitch :frowning2:

We provide the ability to remix projects, so a suggestion for now while we consider your feature request would be to create a create-react-app template app on Glitch, which includes a watch.json and whatever setup you recommend, which your users could use. You can link to the remix app directly from your docs and we’d be happy to feature it on our community site too.

1 Like

Note that create-react-app turns the application pretty close to the Glitch’s space/storage limit.

3 Likes

Using https://glitch.com/edit/#!/create-react-app-sample, how do I get access to the build folder so that I can grab the bundled js file?

Also does this support auto reloading as the create-react-app local?

One more thing, I know glitch is for dev mode, so is that why we cannot directly copy paste the build folder assets here? Exceed the storage limit or something? I saw it crashed by doing this.

1 Like

If the build folder exists on the container then you can programmatically read/write to and from it, even if it’s not shown in the file tree. There’s more about that here: https://glitch.com/faq#hidden-files. You can also use the console to interact with it, which is available under Advanced Options from the top-left project info menu.

You can add a watch.json file to your project to change the Glitch restart behaviour, if you want to make use of create-react-apps reloading. There’s one already in the referenced sample app and more detail about how to use it here: https://glitch.com/edit/#!/watch-json

There are size restrictions on the size of files you can copy/paste, see https://glitch.com/faq#restrictions

1 Like

Just in case someone ends up reading this thread:

  • With recent versions of create-react-app you need an extra env variable, as described here
  • node_modules doesn’t count towards your space limit now, so that’s not a problem anymore :grin:

And to summarize, it’s important to:

  • Have a watch.json file
  • Disable the “Refresh App on Changes” checkbox in your user menu

Regarding serving the build folder with the optimized production code, what I have been doing is, whenever my changes are ready, I:

  • Open the Logs > Console and run npm run build
  • Change NODE_ENV from development to production

This works because I changed the start and build scripts like this:

{
  // ...
  "start": "if-env NODE_ENV=production && npm run prod:start || npm run dev:start",
  "dev:start": "react-scripts start",
  "prod:start": "static build --gzip",
  "build": "react-scripts build && gzip -rk build && refresh" // gziping is optional!
  // ...
}

As an example, I made something similar for this app that has 1500+ dependencies and it wakes up pretty fast: https://jscoach.glitch.me

Here’s an updated boilerplate with instructions in the README:
https://glitch.com/~create-react-app-demo

If you prefer to deploy your production app to GitHub Pages instead, another option besides what has been already shared is automatically renaming build to docs, exporting to GitHub and merging the glitch branch to master. Here’s another boilerplate with instructions in the README:
https://glitch.com/~create-react-app-ghpages-demo

You can see it deployed here: https://dmfrancisco.github.io/create-react-app-ghpages-demo/

Hope this helps! :wave: :blush:

4 Likes

How can I wrap all the create-react-app in a client folder; so, I can separate the React code in client from the express server code out of the client

Hi everyone, one of our support engineers, Angelo, wrote a great article on getting create-react-app working on Glitch https://dev.to/glitch/create-react-app-and-express-together-on-glitch-28gi