Static JS files with Google App Engine / Node.js standard environment from node_modules folder

190 Views Asked by At

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.

0

There are 0 best solutions below