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.

[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.