My team currently have a Lucee server running a bunch of CFML-files that handle everything from queries to styling. I’m aware that it’s probably not best practice, but due to time constraints that’s where we are at the moment.
Because of this, I’m investigating whether it makes sense or not, to use CFML as a means of getting/handling data and then using ReactJS as a means of displaying this data within a modern UI-framework. My impression is that one of the weaknesses of CF is its limits in terms of UI-creation/design. I was inspired by the examples below:
We’ve tried deploying a simple React app to Lucee, but can’t get it to work properly. Is there anything inherent to Lucee that stands in our way? Also - is my dream of using both CF and Reactjs even possible? I haven’t been able to find hardly anyone else trying to achieve the same thing, so I’m beginning to wonder whether I’m a first mover, or just simply lost?
By ‘can’t get it to work properly’ I mean that I can’t get my React app running through Lucee - I’m simply greeted by a blank HTML page that seems to skip running the scripts provide via’ npm build’. When I run ‘npm run/serve’ it works as expected.
And I thought as much. Which makes it even more frustrating that I can’t seem to get it to work.
Btw - I’m by no means a Lucee expert (I’m not event then one that set it up in the first place), so it’s possible that I missed something during the deployment of my React app. I’ve tried both placing an existing app and running a new ‘npm create-react-app’ inside of ‘…/webapps/ROOT’.
How do you normally run non-CF code on Lucee?
Don’t know React, but a little of SPA with Vuejs CLI along with CFML on Lucee on VSCode. I think you are trying to run npm start serve and lucee on the same webroot. I had similiar experiences and dfficulties developing with cfml and Vue JS (CLI) on a very same webroot. Node dev tools for developing SPAs with frameworks like VUEJS (CLI) or maybe React use their own Node-Dev-webserver, and it is difficult to run them alltogether with Lucee or any other dynamic scripting language such as PHP, ASP, JSP or whatever because they all usually use their own webserver.
Options are:
A. develope with Nodejs on the frontend, and populate the data of the app by an API delivering JSON with Lucee. That means you will need to use both webservers in parallel.
Or B: Use Lucee only. In this case you’ll have to load the Javascript Framework with HTML Script -Tag inside a CFML-Template. Downside is that you can’t use all the goodies of Nodejs tools (such as Vuejs CLI)
I was able to set up both worlds together, by migrating both webroots, but that wasn’t an easy task. In my case the vuejs cli injected code into the pages. In my opinion that was rather a risky approach.
What you are describing is essentially what I think that I am experiencing.
I guess my team and I will have to figure out the next course of action.
Thanks for your inputs. It helped clarify things a bit.
Using ReactJS (or better yet, VueJS!) is independent of using Lucee or any other server side language.
Since you’ve got your test React app working through npm run/serve, you should build it and have it served by your web server. Yes, you can use Lucee/Tomcat (default port 8888) to serve, but many people use Apache/Nginx/IIS as proxy to Lucee/Tomcat.
The reason you’re getting the blank screen is probably your Tomcat is not set to serve static files and/or webroot issues. If you open up DevTools in Chrome or Firefox as Zac suggests, you should be able to see network requests and if they are 404 or something else.
My best experience was creating two webroots: One for the frontend SPA, all done with node npm/dev on VScode. Another one for Lucee that delivered all logic and content through tomcats default port 8888. Besides on having them setup on different domains (just for development), I’ve created an API directory in Lucee, for example www.siteAPI.com/api/whatever.cfm. This URL can easily be requested by the SPA frontend using Lucees default port 8888. Cross-Origin-Headers can be set inside the application.cfc of the API and the requesting urls in the global javascript scope of the SPA. When you go into production, all you need to do is change that variables (2 lines), and migrate both webroots by simply copying the builds of the nodejs webroot to lucees webroot. Because the frontend is plain static HTML and Javascript, everything can be done by Lucee in production.
What I like about this setup is a clean separation of development for SPA and API. No need of some nodes npm prebuilding watch options or issues with conflicting web engines.