Server responded with a status of 404 (Not Found)

[mehmetron]

Warning: Prop id did not match. Server: "open-tab-srm91g-/README.mdx" Client: "open-tab-c7qlcm-/README.mdx"
console. @ index.js:1406
:5000/container.html?1577306101860#demoboard-rlpqfp:1

Failed to load resource: the server responded with a status of 404 (Not Found)
webpackHotDevClient.js:120 ./src/App.tsx
Line 4:8: 'DemoboardWorkerProvider' is defined but never used @typescript-eslint/no-unused-vars
printWarnings @ webpackHotDevClient.js:120

warning.js:14 [reakit/Hidden]
You're trying to show a hidden element that hasn't been mounted yet.
You shouldn't conditionally render a Hidden component (or any of its derivatives) as this will make some features not work.
If this is intentional, you can omit this warning by passing unstable_isMounted: true to useHiddenState or just ignore it.
See https://reakit.io/docs/hidden/#conditionally-rendering
warning @ warning.js:14

:5000/container.html?1577306101860#demoboard-rlpqfp:1
Failed to load resource: the server responded with a status of 404 (Not Found)

DevTools failed to parse SourceMap: http://localhost:3000/index.js.map

Image of browser tab with error in console
https://imgur.com/a/MSPuYLD

I'm using Chrome running on a Mac if that's important.

I'd also love to contribute to this project because this looks really cool but I am so confused by the organization of all the code. What do each folder and file do? Do you have any documentation to better understand the code?

[mehmetron]

I assumed it was because I wasn't running in production mode after looking through the code and I added a "build": "react-scripts build", to the package.json file in the examples folder and ran npm run build but then the program didn't even run and I got the error
There was an error trying to load the config "styledComponents" for the macro imported from "styled-components/macro. Please see the error thrown for more information.

[mehmetron]

I tried to run this program on codesandbox and each time I used a different version of @frontarm/demoboard but I kept on getting errors.

For most of the recent releases it was similar to the error above about "styled components"

[mehmetron]

Wow! I think I got it working.

I just went from folder to folder in the packages folder and yarn run ed a few of them in production and it started working!

Hey @jamesknelson I was thinking about getting a subscription to your site to improve my understanding of React. I tried to learn react a few months ago but really struggled but picked up Vue very easily and I've created a few sites with Vue. Right now I want to learn Typescript and React. On your site do you teach React with Typescript or just Javascript? Also, I'd love to learn how Demoboard works, I've spent a few hours browsing the codebase. Do you have any courses or tutorials explaining the underlying technology behind Demoboard?

[jamesknelson]

So to get it working, I think this should work after a fresh clone:

yarn install
yarn build
cd examples
yarn start

Did you give this a go?

Re: Frontend Armory, at the moment, it mainly explains React with plain JavaScript. I haven't added any TypeScript content just yet, as I'd want to be able to provide TypeScript-based examples, and I haven't got that working with Demoboard just yet. Also, there's no content explaining Demoboard just yet - it's still pretty WIP. I'd like to do that one day, but there's no saying when that may be.

[mehmetron]

Hey James

Yeah, I did that but I would constantly get the error in the imgur image and it would be stuck in a "Fetching dependencies" loop
https://imgur.com/a/MSPuYLD

I think the problem was the second error in the console in the image. I think because it was running as development and not production it was listening to localhost:5000 based on the conditionals in this file
https://github.com/frontarm/demoboard/blob/master/packages/demoboard-core/src/defaultURLs.ts

and localhost:5000 wasn't really showing anything

Everything started to work when I started to run as production but I still get this weird error in production when I try to edit the /README.mdx text in the "url"
https://imgur.com/a/JVJk2Q7
I included a before and after image

FrontendArmory looks Great! I was really impressed with some of your free content so I'm really considering checking out a membership. React is just way too complex, especially when compared to Vue but there are lots of really cool projects on Github built with React and I'd like to understand what's happening under the hood.

[jamesknelson]

Ah yeah, definitely the second issue.

All localhost:5000 should do is serve a container.html file from the demoboard-runtime package. This is the file which is opened in the preview iframe - it needs to be on a separate origin for sandboxing purposes which is why it's on 5000 instead of the standard port. I'm not sure why it's 404ing though - I'll need to take a look at this over the weekend.

Re: Frontend Armory, you can sign up to try it out for just a month, and cancel any time if it's not for you – I'd love to hear what you think!