move app directories out of the root

[bpamiri]

@zainforbjs I'm trying to test moving the app directories out of the root but running into some problems. I was wondering if you can reproduce what I'm seeing.

• create an empty directory and cd into it
• in that directory issue the following Commandbox command wheels g app name=myapp setupH2=true cfmlEngine=lucee template=cfwheels-base-template@be
• this should create a myapp directory and install the latest bleeding edge SNAPSHOT into it
• You should be able to issue server start and momentarily get a browser open up to the root

so far so good

• now go into Application.cfc and change line 14 to this.appDir = this.webrootDir & 'app';
• create a folder named app in the myapp folder
• copy the config, controllers, events, global, models, migrator, plugins, and views folders into the app folder
• restart the server using server restart

you should still get the Congratulations page

• now go into the views folder and create a folder called home
• in the home folder create a file called index.cfm and just add Hello World in that file

now if you try to go to the /home url you'll get an error. It looks like there are still some elements that are not using the /app prefix to get to the controllers.

[zainforbjs]

@bpamiri Sure, I will look through and keep posting here.

[adamcameron]

Not sure if this lot will help, but it's a summary of what I needed to do to get a CFWheels-driven app running with the code outside the webroot, and framework code separated from app code: https://blog.adamcameron.me/2021/05/short-version-getting-cfwheels-working.html.

[zainforbjs]

@bpamiri I reproduced your issue and I am also getting this error.
It seems like the paths configured for controllers, view, models, etc. in the onapplicationstart.cfm were missing the "/app/" prefix.

I fixed that and ran the same scenario again and it is showing the Hello world when I go to "/home" as expected.

I created a PR for that fix. PR

[bpamiri]

@zainforbjs that's great. Now let's work on moving the Wheels folder out of the root. We need to make sure that if the Wheels folder is moved out of the root by putting it in a vendor directory in the root or outside of the root, the framework still functions. Then we need to make sure the debug UI all function as well, I think the way the stylesheet and javascript files are loaded will have to change since we will no longer have a URL path to them to simply load them into the html page. Lastly we need to make sure all the tabs of the debug windows still work i.e. Info, Routes, docs, Tests, Migrator, and Plugins.

[zainforbjs]

@bpamiri I've found the cause, fixing and keep posted here.

[zainforbjs]

@bpamiri I've come across with different ways but needs some approval from your side to proceed further on this.

The CSS and JS are not loading because the /wheels mapping does not work on the front end for including CSS/JS files.

Possible Solutions

1. We generate new files for CSS/JS and use cfsavecontent to save the content in an application variable by including CSS/JS files and load that CSS/JS file through variable.
   However, this approach has some limitations. The CSS files include some ".woff" files which are inside the fonts folder. So those are not loading through with this solution. Alternative is to load those fonts through fontawesome CDN.

2. Best and Recommended

• We host all of our CSS/JS files and load those files just like CDNs.

@bpamiri let me know what are your thoughts? Thanks Appreciated.

[bpamiri]

I don't think option 2 will be viable. Developers are going to have to be able to use the framework without an internet connection. I looked into option 1 myself as well and for the CSS/JS files I was just replacing the stylesheet and JS link tags with CFInclude tags. That serves the same purpose as the cfsavecontent method. For the .woff files, I was starting to look at adding them to the page via Base64.

Another approach is eliminating the need for the custom .woff fonts. We could use a more generic SanSerif font definition.

[neokoenig]

You could try using the Tailwind default CSS font family, which basically uses fancier fonts where possible then falls back to system fonts

// San Serif
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// Serif
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

// Monospaced
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

[zainforbjs]

@neokoenig Thanks for the prompt response but I think Tailwind is another FE Stylesheet Framework that will open another complexities into our current scenario for inclusions into CfWheels Folder. For now, we can import needed Fonts to park the ball. @bpamiri what do you think?

[neokoenig]

I just meant you could use the default font families from Tailwind, wasn't suggesting using you actually use it :)

[bpamiri]

@zainforbjs have you made any headway on this?

[zainforbjs]

@bpamiri Yes, I had already started and working. Keep posted here once complete. Thanks

[zainforbjs]

@bpamiri PR is ready to go. please review and get that discussion closed. Thanks