ExtJS in a Subdirectory

I’ve been working on a way for an ExtJS application to coexist with a PHP/Symfony site in the same project. Think I finally have a working solution.

Many of my projects call for a frontend webapp and a backend API. I typically use PHP/Symfony for the API and ExtJS to build the frontend SPA. I have kept them in separate api/ and app/ folders of a single GitLab project but this leads to some challenges.

• I end up having to run two separate webservers during development; PHP for the API and Webpack for the frontend. I have to jump through various hoops to deal with them being on different ports adding complexity and CORS issues.

• When packaging the results into a single webserver container for deployment, I have to wrestle with Nginx and PHP-FPM to serve the results from separate folders in the container.

What I’d like to do is have the ExtJS build system generate its output into the public/app/ folder and let the PHP webserver serve up both the API and the static content for the frontend. I think I have achieved this here.

I started with the typical process for creating an ExtJS webapp using their Open Tooling (i.e NPM) scheme.

ext-gen app -a -t moderndesktop -n ModernApp

Then I started adjusting the npm run build process to put the results down in public/app/. I still don’t understand the internals of Sencha Cmd so it took some time and lots of trial-and-error to make progress here. Some changes worth noting:

• The scripts in package.json were pared down to remove the clean logic since I do that in my Makefile. I removed the Webpack dev server too since I use the PHP webserver instead. The dev script was relaced with watch.
• While I was in package.json, I removed all the extra entries to get it down to a minimum.
• I added the moment addon Node.js module to ensure that’s working. It’s not really required. See package.json and app/index.js. I tested this in the Javascript console, not in the code.
• I removed the “desktop” profile since I don’t use multiple profiles.
• I moved app.js, index.html, index.js, overrides/, packages/, resources/ and sass/ down into app/.
• I added the <base/> tag to index.html.

Things are working now. All of the content is being generated into public/app as I intended. Nothing else is needed for the production make build. When running make watch for development, I have to create a handful of links to get it working. Some of the links are expected; i.e. public/node_modules, public/app/app.js and public/app/src. However, I ended up having to create links in public/ to main.js, manifest.json and resources/ down in public/app and I feel I should be able to avoid these. If someone from Sencah is interested in providing some guidance, I’m interested.

I’m headed to adjust one of my current projects using this scheme to see how well it works.