0

I have read Google's documentation and a number of similar questions, and am not having any success adapting the answers to my issue. I am working with Google App Engine in a Node.js Standard Environment and already have much of my app working and correctly configured.

Now I am trying to use npm modules as library code for BOTH my server-side app, and a client-side javascript app I am serving as a static directory. For this example, consider the widely used jquery module, of course available in npm

I believe the issue is in my app.yaml file, distilled to the part relevant to this question:

handlers:
### THIS ROUTE IS NOT WORKING
- url: /client/shared/lib/jquery\.js$
  static_files: node_modules/jquery/dist/jquery.js
  upload: node_modules/jquery/dist/jquery\.js$
  mime_type: text/javascript
### CLIENT-SIDE STATIC ROUTES ARE WORKING
- url: /client/shared
  static_dir: shared
- url: /client.*$
  static_dir: client
- url: /.*$
  redirect_http_response_code: 301
  script: auto

Of course, I have already run $ npm install jquery. For example, from the "server-side" (my app.js file & friends), the following works perfectly:

import $ from "./node_modules/jquery/dist/jquery.js

Importing from my own "shared" code also works from both client and server via:

import { whatever } from "../shared/<module>.js"

But when I deploy and browse to https://<myapp>/client/shared/lib/jquery.js, I get a 404 error..

The goal is to be to get jquery from my "client-side" static javascript files with:

import $ from "../shared/lib/jquery.js"

(Or an equivalent relative path for deeper modules in the directory tree.)

Jquery is perhaps not the best example, if it bothers you pretend I'm talking about the "pluralize" library. I intend to use plenty of other npm distributions of js libraries and share them between my "client-side" statically served javascript files and my "server-side" code imported/pointed to from script: routes in app.yaml and/or imports from app.js

Also, I know I can use a "bundler" - or a cdn - etc. and I may eventually in production, but according to all the documentation this /should/ work. A correct answer will actually show me how to make this work and/or teach me what I don't understand about the static_files and upload handler options in app.yaml, not suggest an alternative that is a large edit distance away from my current setup.

uint64_t
  • 59
  • 5
  • 1
    You might consider using a bundler like Webpack for your frontend; this will improve your page load speed, and that's how frontend npm traditionally works. – code Mar 03 '22 at 22:08
  • Could you explain what you mean by "sharing code"? Are you talking something like isomorphism like NextJS (I doubt it)? I'm not sure why you'd use jQuery on your server... – code Mar 03 '22 at 23:05
  • jquery was a bad but sufficient example. If it helps you answer my question, pretend I want to use the "pluralize" library from npm in both client and server... by sharing code I mean I want to make a folder full of js files that are importable in both my static client files and my server-side program rooted in app.js... not sure how to make that clearer than I did above by showing the intended import statements – uint64_t Mar 03 '22 at 23:09
  • So by shared code you mean libraries you're using both in the front and backend? (Not real code code you wrote that runs both on the server and client.) – code Mar 03 '22 at 23:16
  • Well, ideally both. I was planning to mount "my" shared code in /shared, and shared "libraries" in /shared/lib ... I don't see a reason I would need to separate them a opposed to making one a child of the other, but that would also be possible. – uint64_t Mar 03 '22 at 23:30
  • Okay. I would highly recommend using a bundler like Webpack for your frontend. – code Mar 03 '22 at 23:33
  • Webpack and similar tools destroy my ability to sanely develop and debug by combining files.. Right now my web-browser tells me the file and line number of a javascript error, and I can jump right there in my text editor. Webpack will make a `bundle.js` file and screw all that up... I agree it's useful for deployment maybe, but not for development? Unless there is something key I am missing? Again, this is a documented feature of `app.yaml` - you should be able to host a single javascript file, or a static directory at whatever route you want.. – uint64_t Mar 03 '22 at 23:36
  • Ah, okay. Are you able to access `http://yourwebsite/path/to/some/lib.js` in your browser? – code Mar 03 '22 at 23:44
  • As I said in my post, no, that makes a 404 error for the script i'm trying to post out of node_modules. but yes, it works for seemingly everything else. maybe reread the end of my post if you are still interested – uint64_t Mar 04 '22 at 01:16
  • Can you check if this [documentation on app.yaml configuration file](https://cloud.google.com/appengine/docs/standard/nodejs/config/appref#handlers_element) answers how `static_files` and `upload` works for `app.yaml` configuration? – Robert G Mar 04 '22 at 11:06

0 Answers0