Communicating with a Minimal API built with .net 6 from a React app

Hello friends,

I am learning more about React and decided to play around with a tutorial, from there I wanted to add onto it by sending for example state changes from our TicTacToe game to a minimal API built in .net 6.

Currently, I am stuck with sending a MapPost to the minimal API, it seem to be working as intended in the network when I am testing the React app, but I am not getting anything on the minimal api side.

https://github.com/rogerertas/LearningReact
https://github.com/rogerertas/LearningMinimalApi

Thanks for reading!

ok so my first reflex is ...

how are you sure it's done front end

and not received backend

I have a suspission

but the point here is "missing context"

how did you asserted "it works here but not there" ?

implying you forgot to share the DevTool > network tabs

which are likely to show an error on the prefligh / cors issue

but thta's just a guess but it's hard to guess how you asserted what works 😄

Hello, thanks for answer and sorry for late response.

Currently struggling to get it up and running properly on my pc rather than laptop:

$paste

If your code is too long, you can post to https://paste.mod.gg/ and copy the link into chat for others to see your shared code!

Oi, that's not the right image for the paste tag

that's what happen when file are sent and some mobile just won't open file

hmm

I installed node js and npm

on my pc

and tried npm start in the root of LearningReact

to try and start it locally

but then I got a error: $ npm start

my-app@0.1.0 start
react-scripts start

(node:20720) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (D:\dev\LearningReact\node_modules\webpack\lib\util\createHash.js:90:53)
at NormalModule._initBuildHash (D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:401:16)
at handleParseError (D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:449:10)
at D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:481:5
at D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:342:12
at D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array.<anonymous> (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (D:\dev\LearningReact\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at D:\dev\LearningReact\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
D:\dev\LearningReact\node_modules\react-scripts\scripts\start.js:19
throw err;

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (D:\dev\LearningReact\node_modules\webpack\lib\util\createHash.js:90:53)
at NormalModule._initBuildHash (D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:401:16)
at D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:433:10
at D:\dev\LearningReact\node_modules\webpack\lib\NormalModule.js:308:13
at D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (D:\dev\LearningReact\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at D:\dev\LearningReact\node_modules\babel-loader\lib\index.js:51:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.0

Sorry for wall of text, I had idea to make it smaller in a .txt

is there a better "best pracc" way to share this kind of information?

how did you created the app ?

it seems to be using deprecated lib or standard

a yeah you used CRA

i think found a workaround for that last week

i'll elaborate in 30min if you want

i'm not on my pc

my first advice is to drop cra for the template creation if you don't need it

which mean delete all the repo

and recreate

remember in npm

no UPPER case

no dot either

full lower case and dash in name of app or package

the reason for that drastic change is that CRA (Create React App) is slowly dying

it's slow

it's fuxking heavy

there a lot of cve

they never manage to get it up to date

it rely on webpack

which is also slow

and it's using old way to "build/bundle"

it rely on script that you don't have access to by default

so it seems good until it's not

and that's why vite replaced webpack based template

less shit/less bloat in template

rely on esbuild to replace webpack

less dependency => less cve / faster to install

faster to start

faster HMR

The con' of cite template is if you're planning to deploy stuff

because they have sort of script to help

but let's be honnest they generally never fit anyway

so that's my HIGHLTY RECOMENDED fix

delete / recreate without CRA / use vite

i bet it will fix your node error

because CRA generate stuff that are outdated

and node tell it to fuck off 🤣

I followed React tic tac toe tutorial from their page https://reactjs.org/tutorial/tutorial.html

i'm not blaming you on that

no worries

and then I wanted to do extra steps to integrate it with a server to try learn more in depth

that's the culprit

because of all listed above

this is before create-react-app pull shit 50% of the time

it will be fixed sooner or later

and something else will break

their template depends on HUNDREDS of library instead of like 3-4

so yeah ... issues

I see

thanks for insight

let me see

i't slow ....

Ah, I need to do the same steps on the pc as I did on the laptop

to install the dependencies

I assume

well

wait

let me finish with both tool

ok

you'll see something

let me do npm create vite@latest my-app -- --template react-ts first

ok

I'll just have to do it twice

both

in order to force the cache being populating

so that I won't bench cache miss

so that's the thing I'm telling you to use instead of npx create-react-app my-app