I want to have a very stripped down version of the cat-tracker-app that just deals with settings,

[Burt]

I want to have a very stripped down version of the cat-tracker-app that just deals with settings, so I can import what is useful to an existing web application. I am new to web applications, but learned some of the languages. However, I cannot run anything. For example

Burt@T420S MINGW64 ~/nrf-asset-tracker/cat-tracker-web-app (saga)
$ npm start

> @nordicsemiconductor/[email protected] start
> PUBLIC_URL=/ react-scripts --max_old_space_size=4096 start

'PUBLIC_URL' is not recognized as an internal or external command,
operable program or batch file.

Oh, npm test does run. npm build took so long on my slow computer I figured it is not what I am looking for.

I cannot do anything with node after I "tsc --jsx react". For example, if I throw in a few console.log()s and try 

$ node index.js

I get

cloudFlavour=AWS
version=0.0.0-development
index.js line 45
hi
hi2
C:\Users\Burt\nrf-asset-tracker\cat-tracker-web-app\node_modules\@amcharts\amcha
rts4\core.js:8
export { System, system } from "./.internal/core/System";
^^^^^^

SyntaxError: Unexpected token 'export'
at compileFunction (<anonymous>)
at Object.compileFunction (node:vm:355:18)
at wrapSafe (node:internal/modules/cjs/loader:1022:15)
at Module._compile (node:internal/modules/cjs/loader:1056:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:996:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (C:\Users\Burt\nrf-asset-tracker\cat-tracker-web-app\s
rc\HistoricalData\HistoricalDataChart.js:8:15)

It's a beautiful program but if I cannot experiment with it so that I can pull out a few good ideas we need like the red lights next to settings, it is of little value to me. The textbooks are not helpful when I get the SyntaxError problem shown above.  Thanks.

[Burt]

I am making progress with using tsc. I saw bizarre messages when the compiler ended up at src/azure/api.ts and I was able to eventually track it down to extraneous non printable characters n the stream, for example, using "od -c"

                                                   c o n s t
279 0010540 d e l 357 270 217 = < A e x t e
280 0010560 n d s { [ k e y :

Both lines 166 and 205 have this problem after the word "del". Octal 357 270 217 is Decimal 239 184 143, and my ASCII table shows decimal 143 as the extended ASCII code for the last letter in the Norwegian alphabet, what I think of as the abbreviation used for Angstroms.

Another issue I had is that the dependency history at version 5.0.0 will not allow me to compile; I needed a version <5.0.0.

I am working through another set of gotchas, hopefully a small set.

Can you make corrections to the git repository?

[Markus Tacker (he/him)]

Hei Burt,

thanks for checking out the nRf Asset Tracker Example.

I understand that you want to re-use the Settings component in you existing application. Right now this widget is not available as a standalone package, therefore it will be challenging to port this to your application. I also depends on providing the device shadow in the right format (desired, reported and metadata need to be merged). Nevertheless I would recommend to copy the Settings component to your project and start adding the dependencies.

Burt said:

Burt@T420S MINGW64 ~/nrf-asset-tracker/cat-tracker-web-app (saga)
$ npm start

> @nordicsemiconductor/[email protected] start
> PUBLIC_URL=/ react-scripts --max_old_space_size=4096 start

'PUBLIC_URL' is not recognized as an internal or external command,
operable program or batch file.

It looks like you are running `npm start` from the Windows Command line (which does not support setting environment variables like this). If you are on Windows using WSL is the recommended approach.

Burt said:

I cannot do anything with node after I "tsc --jsx react". For example, if I throw in a few console.log()s and try 

$ node index.js

The project is not intended to be compiled using the TypeScript compiler. `tsc` takes the .tsx files and individually compiles them to JavaScript. This is not a suitable format for executing JavaScript in a browser.

A bundler needs to be used which takes all the .tsx files and compiles the using TypeScript to JavaScript and then bundles them into one big file. In the web application we do this using webpack; the process on how to get started with the web application framework Create React App that is used, see this guide: https://create-react-app.dev/docs/adding-typescript/. A simpler setup is shown in the Device UI, it uses snowpack.

[Burt]

Hi Markus,

I wanted to reply to your very helpful message, but I cannot find a Reply button below, so I will type here and hope you see this. You really were able to get me over a few stumbling blocks. I'm sure I had used a bundler (browsify) a few years ago on a different project, but at this time I was trying to use Flanagan's JavaScript textbook and also the Typescript website to get started -- Flanagan does not even mention bundling. Finally, my attempts to run npm start -- I would see the development server browser come up, blank and connection icon spinning -- and I would quit out, not realizing that I have to wait a long time before I see console output. The one thing I was able to google was the PUBLIC_URL shell syntax issue so I had that under control.

I may not be able to interest my colleague in this -- so far he has only been interested in "can I get a JSON packet to the device, in a format the device understands," without having any interest in acknowledgements. But I figure eventually a customer will come along that is unhappy with that, especially if we use PSM or EDRX.

You got me on track, and I may have more questions later.