2

I want to develop my static web application with React. I have just done with the Tic-tac-toe getting started tutorial. Are there anyways I can "compile" (or whatever the term is) ReactJS straight into my HTML file? So, far to run that ReactJS application I need to run it with a server from Yarn.

I prefer to not use CDN because I want to update and manage the dependencies.

Let say, for my starting point, I want to have that Tic-tac-toe game from official React getting started tutorial to be served with just one HTML file (CSS and JS in that one HTML file). I want to see if this is possible or not, so I don't care about the best practice for this question.

notalentgeek
  • 4,939
  • 11
  • 34
  • 53
  • 1
    Build the app then take the file output? https://stackoverflow.com/questions/39791069/create-react-app-npm-run-build-command – Ric Oct 29 '17 at 14:53
  • 1
    I think I miss something or I am not, idk. I have ran yarn build opened the index.html, but it returns this error: pastebin.com/RTLdhxPj. – notalentgeek Oct 29 '17 at 15:30

4 Answers4

3

You should have a look at Gatsby JS

It's a static site generator for React. Probably that's what you're looking for.

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44
0

Run npm run build or yarn build and see the output in the build folder. It generates static HTML, CSS and Javascript.

Dávid Molnár
  • 10,673
  • 7
  • 30
  • 55
  • 1
    I think I miss something or I am not, idk. I have ran `yarn build` opened the index.html, but it returns this error: https://pastebin.com/RTLdhxPj. – notalentgeek Oct 29 '17 at 15:25
  • Try deploy it to a web server. Opening it through the file system may not work. – Dávid Molnár Oct 29 '17 at 16:29
  • 1
    I want it to be static website. I don't want to use server. This can be done with CDN, but I would like to see if I can make static website with ReactJS downloaded from a package manager like Yarn or NPM. – notalentgeek Oct 29 '17 at 16:34
  • You shouldn't need to deploy it to a web server. You should be able to run it locally. – Scott Oct 29 '17 at 16:57
  • It is a static website. Something has to serve the static files over HTTP to the browser. Therefore you have to use a web server which serves *static* files. – Dávid Molnár Oct 29 '17 at 16:58
  • Theoretically you could open the `index.html` and load the page from the file system. It could work, but often the browser doesn't allow you to load additional resources (security reasons) and the links in the page could be broken as well. – Dávid Molnár Oct 29 '17 at 17:01
  • You could use a *local* web server as well, you don't need to deploy to a remote server or CDN. If you run `yarn start`, it starts a local lightweight web server and serves the static files over HTTP to the browser. – Dávid Molnár Oct 29 '17 at 17:02
  • I have tested. `yarn build` works only with a server. Even `python3 -m http.server` works. So, no! ReactJS will not work without server out-of-the-box. – notalentgeek Oct 30 '17 at 09:18
  • But it's not about ReactJS. It is just a client side framework. As I said before you need to serve HTML, CSS and Javascript to the browser over HTTP. This is why you need the server and not because ReactJS is dependent on it. – Dávid Molnár Oct 30 '17 at 10:00
  • @DávidMolnár That's simply wrong. Your webbrowser can read from file:// without the need of a server (software). – DarkTrick Oct 09 '20 at 07:17
  • @DarkTrick you're right. The browser can read files from the filesystem using `file://`, but it often leads to problems and in this case you might need to fix the URL's in the html and CSS files. That's why I'm suggesting to use a static web server in this case. – Dávid Molnár Oct 09 '20 at 09:44
0

Sounds like you are using Yarn with create-react-app. If so you are running:

yarn start

Now run:

yarn build

See more info here: https://github.com/facebookincubator/create-react-app

The static web application will be built to a build folder. You will find all of the static assets there like JS, CSS and HTML.

Scott
  • 3,736
  • 2
  • 26
  • 44
  • 1
    I think I miss something or I am not, idk. I have ran `yarn build` opened the index.html, but it returns this error: https://pastebin.com/RTLdhxPj. – notalentgeek Oct 29 '17 at 15:25
  • That is a different issue, perhaps best suited for a new question. Link it here when created and we can help. – Scott Oct 29 '17 at 16:49
  • And these might help for that issue: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment , https://stackoverflow.com/questions/45484183/cannot-create-react-app , https://stackoverflow.com/questions/46566235/how-to-generate-bundle-js-for-existing-react-app-created-using-create-react-app – Scott Oct 29 '17 at 16:54
0

I have tested. yarn build works only with a server. Even python3 -m http.server works. So, no! ReactJS downloaded from non-Bower package manager will not work without server out-of-the-box.

notalentgeek
  • 4,939
  • 11
  • 34
  • 53