Javascript Required error

[garyisaac]

I have successfully built the app on Ubuntu server 22.04. I deployed it to production on Apache webserver on the same Ubuntu ec2 instance. The URL for the app opens with a blank page. The source shows an error stating Javascript needs to be enabled. Javascript is enabled in my browser. I did some research but could not resolve the error. I am using http://localhost in Package.json. Do you have any ideas on to resolve this issue? I can provide more details if necessary.

[cmoesel]

Hi @garyisaac. The Pain Management Summary App is a SMART App. As such, its primary use case is to be launched from an EHR SMART launcher. You cannot browse directly to the app at http://localhost in a browser. You need a SMART Launcher to invoke it, as this injects necessary data into the app via query parameters.

Have you tried launching the app from the SMART Sandbox? There are instructions for this in the README here. Note, however, that the App Launch URL you enter in step 3 will be different since you're deploying at the root. You probably need to enter something like http://localhost/launch.html (but also account for the port if you server on something other than 80). If it still doesn't work, try it in a private browsing window; sometimes the browser cache can cause a problem.

If that's working but you're having trouble finding patients with data that satisfies the app, then try uploading test patients as documented here. (Note: you may see a few errors, but this is OK). Then launch the app again, but this time pick Brenda Jackson as the patient.

BTW, I tested this all by editing the homepage in package.json as you described, then running npm run build, then serving it via an Apache httpd Docker container: docker run -dit --name my-apache-app -p 8000:80 -v "$PWD/build":/usr/local/apache2/htdocs/ httpd:2.4. This served it on port 8000, so when I configured the SMART launcher, I used http://localhost:8000/launch.html as my App Launch URL. It all seemed to work fine when I ran it this way.

[garyisaac]

Thanks Chris! I did not realize that I could not hit it directly at the URL. I will test it using a sandbox. I appreciate the help. From: Chris Moesel ***@***.***> Sent: Wednesday, November 1, 2023 2:15 PM To: AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY ***@***.***> Cc: Gary Isaac ***@***.***>; Mention ***@***.***> Subject: Re: [AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY] Javascript Required error (Issue #45) Hi @garyisaac<https://github.com/garyisaac>. The Pain Management Summary App is a SMART App. As such, its primary use case is to be launched from an EHR SMART launcher. You cannot browse directly to the app at http://localhost in a browser. You need a SMART Launcher to invoke it, as this injects necessary data into the app via query parameters. Have you tried launching the app from the SMART Sandbox? There are instructions for this in the README here<https://github.com/AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY#to-test-the-app-using-the-public-smart-sandbox>. Note, however, that the App Launch URL you enter in step 3 will be different since you're deploying at the root. You probably need to enter something like http://localhost/launch.html (but also account for the port if you server on something other than 80). If it still doesn't work, try it in a private browsing window; sometimes the browser cache can cause a problem. If that's working but you're having trouble finding patients with data that satisfies the app, then try uploading test patients as documented here<https://github.com/AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY#to-upload-test-patients-to-the-public-smart-sandbox>. (Note: you may see a few errors, but this is OK). Then launch the app again, but this time pick Brenda Jackson as the patient. BTW, I tested this all by editing the homepage in package.json as you described, then running npm run build, then serving it via an Apache httpd Docker container: docker run -dit --name my-apache-app -p 8000:80 -v "$PWD/build":/usr/local/apache2/htdocs/ httpd:2.4. This served it on port 8000, so when I configured the SMART launcher, I used http://localhost:8000/launch.html as my App Launch URL. It all seemed to work fine when I ran it this way. — Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAYMLVP5UW7FHH6MENAGXQLYCKGRZAVCNFSM6AAAAAA6XZF2D2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBZGQZDSNRQHE>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[Gary-Isaac]

Unfortunately, I am still getting the same error. I did try a private browser session. I have included some screenshots. I have looked at the Apache log. Is there a log for the app itself? Not necessarily a native log but if the web application/javascript framework will give more details.

[Gary-Isaac]

I used the Developer Tools feature in Firefox. It shows two errors unsure if they are valid errors or not.

[cmoesel]

Hi @Gary-Isaac. Thank you for the additional details. I noticed that in your package.json, you have:

"homepage": "http://localhost/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY"

In your initial message, you said "I am using http://localhost in package.json". I think I misunderstood you, because I thought you meant that you were using "homepage": "http://localhost". I see above, however, that you're still using the /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY path as well.

That's fine (and actually closer to our default deployment approach). It just means that some of what I recommended above is not quite right. So... as long as you keep your "homepage" as "http://localhost/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY", then:

• When you deploy the code from build on Apache HTTPD, make sure that you put it under that /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY folder/path so that the HTML pages are at /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/index.html and /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/launch.html
• When you use the SMART launcher, also specify the App Launch URL using that path, e.g., http://ec2-52-14-22-228.us-east-2.compute.amazonaws.com/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/launch.html

Hopefully that helps. I apologize for the earlier miscommunication!

[Gary-Isaac]

Thanks for your help. I did seen an error based on your guidance. I had the app in the build folder in Apache (/var/www/html/build). I changed it to /var/www/html/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY modified my Apache config and restarted the server. I am still get the same error. I tried in a private browser and a different browser.

• How did you configure Apache (I pasted some of my config below)?
• And, are you using the App Launch Options screen to launch the app? Or, Client Registration & Validation screen? I am wondering if there a config in SMART Launcher that I missed like using Confidential Symmetric instead of Public.
• Also, I did not upload the test patients. Would that be an issue?

It is interesting that the Launch Sample App only works in a private browser.

000-default.conf

<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/build

apache2.conf

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted

<Directory /var/www/html>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted

/var/www/html/build/.htaccess

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f

Config from https://medium.com/@manojprasad452/how-to-deploy-a-react-app-on-apache-web-server-73e468353118

Thanks again.

[cmoesel]

Hi Gary,

I'm sorry you're running into trouble. Others haven't reported these types of issue before, so I'm not sure what's going on.

I don't have an apache server running anywhere, so I was using the httpd Docker image and its default configuration. I was able to extract the default config from the docker image. Here it is in case it is helpful (renamed with a .txt extension since GitHub doesn't allow attaching .conf files): my-httpd.conf.txt

Uploading test patients is helpful once you get the app working correctly -- but I don't think you're even getting that far, so it shouldn't matter.

I'll try again and walk through the steps in case it is helpful (even though you are doing it a bit different).

1. I cloned AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY from GitHub.

2. I edited package.json so the homepage is http://localhost/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY. Technically this is not necessary, because React only cares about the path after the hostname -- but I did it just to be sure.

3. I ran npm install. NOTE: I am using Node 16, but I'd expect 18 or 20 to work. What are you using?

4. I ran npm run build. Here is the output I got from that:

❯ npm run build

> [email protected] build
> craco build

Creating an optimized production build...
postcss-resolve-url: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
Compiled successfully.

File sizes after gzip:

  521.54 kB  build/static/js/main.ea2615a1.js
  75.03 kB   build/static/js/launch.390be9e2.js
  19.26 kB   build/static/css/main.bf642c9d.css

The project was built assuming it is hosted at /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

(NOTE: Your compiled JS may have different numbers at the end. That's OK.)

5. This is the part where we diverge some. I used a docker container to have httpd serve the build directory at http://localhost:8000/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/

docker run -dit --name my-apache-app -p 8000:80 -v "$PWD/build":/usr/local/apache2/htdocs/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/ httpd:2.4

If you're not familiar w/ Docker, the -v argument is basically mapping my local build folder (that has the compiled app files in it) to the /usr/local/apache2/htdocs/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/ folder in the container. This is equivalent to creating AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY under /usr/local/apache2/htdocs/ and then copying all of the files from build into it.

6. I browsed to https://launch.smarthealthit.org/ and entered the App Launch URL: http://localhost:8000/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/launch.html. I didn't change anything else (on this tab or any others). Here's what it looked like:
   

7. I clicked the "Launch" button and was presented a list of patients to choose from. Screenshot:
   

8. I clicked on the first patient, Mr. Geoffrey Abbott. This launched a new tab with the Pain Management Summary App. That new tab looked like this:
   

Although this didn't load the full summary, this is the expected output for this patient. If you can get this far, then your app is probably working. At that point you can upload the test patients (as described in an earlier comment) and use Brenda Jackson.

Note -- I did not do any of this in a private window. The reason I sometimes recommend a private window is because if you've tried the app a few times, it's possible that your browser is caching an old version of the app which might not work. You can also get around that by clearing your cache (at least for the domain you're hosting your app on and maybe for the smarthealthit.org domain too).

I'm hoping that maybe this is helpful. If you have docker, you might try following these exact steps yourself just to see it working. Otherwise you need to adapt step 5 to your environment.

[Gary-Isaac]

Thank you Chris for the comprehensive instructions. Hmm... I am using Node.js version v12.22.9 on Ubuntu 22.04 server. That sounds like an old version.

My build output is the same as yours.

ubuntu@ip-172-31-37-79:~/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY$ npm run build

[email protected] build
craco build

Creating an optimized production build...
postcss-resolve-url: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
Compiled successfully.

File sizes after gzip:

514.24 kB build/static/js/main.db8014c9.js
74.98 kB build/static/js/launch.00c0bdd3.js
19.26 kB build/static/css/main.bf642c9d.css

The project was built assuming it is hosted at /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

https://cra.link/deployment

Why did you use port 8000 in http://localhost:8000/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/ when your package.json home does not use 8000 (http://localhost/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY)? I guess more specifically. Do I have to use port 8000 in some way to run the app? I am using port 80.

[Gary-Isaac]

I am tried several Apache2 configurations and cannot get it to launch. I am still wondering about the relationship of port 8000. Your Readme file states under step 3 the homepage value should be http://localhost:8000/pain-mgmt-summary when deploying to https://my-server/pain-mgmt-summary/. I guess it is saying that https://my-server and http://localhost:8000 do not have to match.

• I am deploying to http://ec2-3-133-88-215.us-east-2.compute.amazonaws.com/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/. What should my homepage value be?
• Do I have to use port 8000 somewhere? Or, does your Docker command just forward port 80 to 8000 (i.e., port 8000 does not have to be used for the app to run; it does not use 8000 for some to connect a React app)?
• Do you recommend a web server other that Apache2 for deploying the app?

3. Modify the homepage value in package.json to reflect the path (after the hostname) at which it will be deployed a. For example, if deploying to https://my-server/pain-mgmt-summary/, the homepage value should be "http://localhost:8000/pain-mgmt-summary" (note that the hostname need not match) b. If deploying to the root of the domain, you can leave homepage as "."

[garyisaac]

Hi Chris,

It seems like Nginx is a good option for deployment. I'll try it. I could also try Heroku or Amplify is Nginx does not work. I guess I should update my Node to minimum version 16.

[cmoesel]

Hi @garyisaac / @Gary-Isaac. I would definitely try updating your version of Node first. Node 12 reached end-of-life a year and a half ago. On my system (a Mac), I can't even successfully build this app using Node 12 (it crashes). It's quite possible that Node 12 is the problem here -- so I'd change that before changing anything else. After upgrading, delete node_modules and build, then re-run npm install and npm run build.

As for my use of port 8000, I only did that because I have a different service already using port 80 (and port 8080) on my system. But it should not matter what port you use. You also don't need to put it in the package.json homepage, because the host and port are actually ignored during the build; it only cares about the relative path after the host and port (e.g., //AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY).

As for alternate servers... if it's still not working after upgrading to Node 16 or 18, then you could try the server script that is built into this project. First run npm run build, then run npm run start-static. This will start the app on port 8000. If you want to start it on another port instead, you should be able to modify the scripts/serve-build.js file pretty easily.

[Gary-Isaac]

Hi Chris,

I updated to Node 18, built the app again, ran it on Apache and the same blank screen came up when I launched it using a private browser on the SMART sandbox. Then I installed nginx and ran it the same way. Blank screen again.

I have noticed that a bunch of posts say to clone the repository inside the web server folder, build the app, and then configure the server to point to the build directory. Essentially, the repo is copied to the web server root directory then built and the actual public root is pointed to the build folder. Tried that and the same blank screen came up.

Everything I have read seems to say a blank screen means the homepage value is incorrect. Are you sure this is correct?

"homepage": "http://ec2-18-216-106-104.us-east-2.compute.amazonaws.com/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY",

[cmoesel]

Hi @Gary-Isaac. The homepage is used to indicate the relative path where the webapp resides on the server. If you point the public root to the build folder, then the app is served at root, not at /AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY -- so a "homepage" that has "/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY" at the end would be wrong in this case.

If you plan to serve the build contents at the public root of the server, then:

• set "homepage" to "http://ec2-18-216-106-104.us-east-2.compute.amazonaws.com/"
• build the app (it's important you re-build it after changing the homepage)
• serve build as the public root
• Use http://ec2-18-216-106-104.us-east-2.compute.amazonaws.com/launch.html as your App Launch URL

OR if you plan to serve the build contents at the relative path "/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY", then:

• set "homepage" to "http://ec2-18-216-106-104.us-east-2.compute.amazonaws.com/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY"
• build the app (it's important you re-build it after changing the homepage)
• serve build at the relative path "/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY" (however you need to configure your server to do that)
• Use http://ec2-18-216-106-104.us-east-2.compute.amazonaws.com/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY/launch.html as your App Launch URL

Either approach should work -- you just need to ensure that your "homepage", relative public path on the web server, and launch URL you use in the sandbox are all consistent.

[cmoesel]

Hi @Gary-Isaac. Have you been able to get this working?

[garyisaac]

Thanks for checking in Chris. No, I did not get it running. From: Chris Moesel ***@***.***> Sent: Thursday, November 30, 2023 8:54 AM To: AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY ***@***.***> Cc: Gary Isaac ***@***.***>; Mention ***@***.***> Subject: Re: [AHRQ-CDS/AHRQ-CDS-Connect-PAIN-MANAGEMENT-SUMMARY] Javascript Required error (Issue #45) Hi @Gary-Isaac<https://github.com/Gary-Isaac>. Have you been able to get this working? — Reply to this email directly, view it on GitHub<#45 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAYMLVP6SMKVTTN4LG3BZNDYHCFY5AVCNFSM6AAAAAA6XZF2D2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZTHAZDOMJVGM>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[cmoesel]

A while back I suggested this:

As for alternate servers... if it's still not working after upgrading to Node 16 or 18, then you could try the server script that is built into this project. First run npm run build, then run npm run start-static. This will start the app on port 8000. If you want to start it on another port instead, you should be able to modify the scripts/serve-build.js file pretty easily.

Have you been able to try that?