Announcement
· Aug 28, 2020
Open Exchange

New Video: Building Data-Driven Web Apps

#Angular #Global Summit 2019 #JavaScript #Node.js #React #REST API #Video #InterSystems IRIS

Hi Community,

Enjoy watching the new Global Summit 2019 video on InterSystems Developers YouTube Channel:

⏯ Building Data-Driven Web Apps

 

https://www.youtube.com/embed/sLq2NRf0xq4
[This is an embedded link, but you cannot view embedded content directly on the site because you have declined the cookies necessary to access it. To view embedded content, you would need to accept all cookies in your Cookies Settings]

It's easier than ever to develop clean, ReactJS apps using InterSystems IRIS REST API. In this video, we will show how to build a simple but feature-rich open-source ReactJS app that can serve as a template/toolkit for other developers.

Takeaway: You will leave with well-written sample code to kick start their front-end development efforts.

Presenter: @Sergei.Shutov, Developer, InterSystems

Additional ressources:

⬇️ Angular Material and InterSystems IRIS Starter on Open Exchange

➡️ Rapid Development Resource Guide - 2019

Enjoy and stay tuned! 

Check the related application on InterSystems Open Exchange
Discussion (7)1
Log in or sign up to continue
Michael Davidovich · Sep 4, 2020

@Sergei.Shutov 

Hi there!  I started following this tutoiral and got stuck pretty fast.  Some questions you might be able to help with:

- Should I be able to do this in Cache 2018?  We are not yet on IRIS.

- If so, was it correct to clone the app into my CSP application root (e.g. for me it was C:\InterSystems\Cache\CSP\mxdtest\new-project)?  I did this becuase for example I have C:\InterSystems\Cache\CSP\mxdtest\testpage.html and it renders as expected when I visit http://localhost:57772/CSP/mxdtest/test/testpage.html (I know you can't use these links, but I'm just trying to show you the best I can what I'm doing).

- General web application question for Cache/IRIS: once I create the web application for example at \csp\mxdtest, any subfolder there is treated as part of the app, yes?  So i could create C:\InterSystems\Cache\CSP\mxdtest\images and the images folder are part of the web applcation  \csp\mxdtest?

Questions maybe you can advise on but might be something for my system admin to answer:

- When I run npm run -- ng build --watch I get this:

$ npm run -- ng build --watch

> angular-ngrx-material-starter@8.3.0 ng C:\InterSystems\Cache\CSP\mxdtest\new-project
> ng "build" "--watch"

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Date: 2020-09-04T16:33:26.206Z
Hash: aa7f367b55f24e0e97d8
Time: 15768ms
chunk {main} main.js, main.js.map (main) 675 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 159 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.27 MB [initial] [rendered]

ERROR in projects/angular-ngrx-material-starter/src/app/app/app.component.ts(35,10): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
projects/angular-ngrx-material-starter/src/app/features/about/about/about.component.ts(13,19): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
projects/angular-ngrx-material-starter/src/app/features/examples/theming/parent/parent.component.ts(12,22): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
projects/angular-ngrx-material-starter/src/environments/environment.prod.ts(1,21): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
projects/angular-ngrx-material-starter/src/environments/environment.test.ts(1,21): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
projects/angular-ngrx-material-starter/src/environments/environment.ts(6,21): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

Then when I run the docker command it says docker isn't running, though I seem to have it installed.

Your thoughts are appreciated!

Mike

0 0
Ben Spead · Sep 11, 2020

I need to defer to @Sergei.Shutov  for many of the answers but I can help with one of these:
[quote]

- General web application question for Cache/IRIS: once I create the web application for example at \csp\mxdtest, any subfolder there is treated as part of the app, yes?  So i could create C:\InterSystems\Cache\CSP\mxdtest\images and the images folder are part of the web applcation  \csp\mxdtest?

[/quote]

Yes, that is correct.  Your subfolders under the root should be navigable via the CSP application.  NOTE - I think this can be overridden by web server settings, but this is the default behavior and I leverage it frequently for my apps

0 0
Michael Davidovich · Sep 11, 2020

@Ben Spead Thanks for taking a stab at it. 

Ok yes, good, it makes sense that is the default behavior.

I think really the only other pressing question is if this tutorial should run on Cache, not just IRIS.   I thought I had Docker installed on my machine, but I think I must be lacking an AD group or something to actually run it.

That said, Docker is new territory for me too: I just read the 'docker-compose up' command documentation and I'm a bit confused.  When you run a Docker image, isn't there a virtual machine at play?  How is Docker working in this context where I've unloaded the code from GitHub to my webapp and then running the docker-compose up command in that directory?  

Thanks for any help.

Mike

0 0
Ben Spead · Sep 11, 2020

I hope that someone else can chime in and confirm, but my understanding is that we don't release Caché on containers, only InterSystems IRIS containers (I just looked in the Distributions section of the WRC to confirm).  However, you should be able to get a InterSystems IRIS container to play with so this shouldn't be a blocker for you - just grab an InterSystems IRIS container (available via the WRC Distributions page, or Docker Hub) and use that to try the demo.

In terms of Caché on containers, I know that there are people in the community who have 'rolled their own', and you can find details on threads here, but I don't think you want to go in that direction if you're new with containers.  

HTH - good luck!

Ben

1 0
Robert Cemper · Sep 11, 2020

Confirm. No Caché in containers.
I built one myself a year or more ago. Not real rocket since but quite some effort. 
(late thanks to @Dmitry Maslennikov and  @Luca Ravazzolo )
Now I'd position it as less rocket than before. But not really worth the effort.
I finally grabbed a VM instead for my "exercises". 

Today I would just use WSL2 instead with a default Linux distribution.

3 0
Michael Davidovich · Sep 11, 2020

I guess where I'm a little confused is this: is the code for Sergey's demo a docker image?  The little code mix graph on GitHub says it's mostly TypeScript.  So it's just Javascript code for the most part?  What is the 'docker-compse up' command doing to that bundle of code from the git repo while it sits in my web app in IRIS?

So am I to understand that for this demo to work, I would need to run a containerized IRIS using docker, not a local instance on my machine?

Ugh, chicken and egg here . . . I think I need to know more about Docker and IRIS before I even attempt this.

0 0