Add React Typescript example about nimview HOT 10 CLOSED

Hey, thx for trying out nimview.
There is a vue example that uses webpack and babel. Maybe you can check this one, as it is probably closer to react than svelte.

Are you using windows or Linux?
When using Windows, I would recommend to try to run the code in IE11 first in httpserver / debug mode. This usually gives additional hints.
I currently have some time. If you share the code, I can help to debug.

from nimview.

Here it is https://github.com/gavr123456789/nimview-react-test
Im using linux arch.
Used this guide: https://github.com/rollup/plugins/tree/master/packages/typescript

from nimview.

@gavr123456789
Now I get it - you are compiling your React code and get this error message in your browser.
It seems that React expects to use Node.js or at least have some variables that tell React if this is production code.

I don't think that using the svelte example to mix it with react is a good start.
Using the vue sample might be better. Maybe I can add some "hello world" React sample...

from nimview.

Yesterday I spent all my free time after work on this attempt, so I'd better wait for the hello world example, also please add typescript

from nimview.

Here is some minimal sample - not using any backend functionality yet. Seems that react has issues with polyfill on windows.
Maybe it works good on linux, where you don't need to tune babel as much as on windows. No typescript added yet.
react.zip
It may take some time until I will add some proper react example. I don't like React much.

from nimview.

Got error when trying to start in debug

Required file index not found at /home/gavr/Projects/nimViewTest/src/public/index.html; cannot start UI; the UI folder needs to be relative to the binary [IOError]

I set start("public/index.html")
...
When I trying to run yarn build I got

Creating an optimized production build...
Failed to compile.

src/index.js
  Line 0:  Parsing error: Cannot find module '@react/babel-preset-app'  
...

When I tried to install babel-preset-react-app instead of @babel/preset-react nothing changed

from nimview.

Required file index not found at /home/gavr/Projects/nimViewTest/src/public/index.html

The file doesn't exist at this location. In the .zip file, I used start("../build/index.html")

When I trying to run yarn build

No issue on my machine when I tried npm install && npm run build

from nimview.

So - I just added an example for react:
#34

Just merged it.
It doesn't contain typescript. The other examples also just use plain JS, so I wanted to keep the examples consistent. I guess it shouldn't be a big deal to add typescript support as you can just some react sample code.

You just need to modify following:

• to create inline JS code, you may need to install an inliner, for example "npm install tauri-inliner"
• for IE 11 / babel , you need to npm install react-app-polyfill and include it in your index.js with import 'react-app-polyfill/ie11'
• add "homepage": "./", "proxy": "http://localhost:8000", to your package.lock to have relative asset directories and port 8000
• npm install nimview and add import backend from "nimview" whenever you want to trigger backend code from js
• create an .env file with content BUILD_PATH=./dist to compile js to a dist folder instead of build

from nimview.

Nice, thank you.
Also it is not possible to use node js right?
For file browser I need some fs watch, and I cant find something for nim as good as chokidar.

from nimview.

I just had a short look at chokidar and I have no idea on how to use it with nimview. You cannot use js or node for back-end code. At least not in an async way.
Maybe you find some way - but I wouldn't know where to start.

from nimview.