ExpressJS using EJS fail to load static assets when deployed on AWS Amplify

Viewed 594

I am developing a web app using Express JS and EJS view engine and it will be deployed on AWS Amplify. Everything works fine in localhost, but has an issue with loading static files (css, js) when I deploy it on Amplify. The detail of this issue is described as following:

1. Issue description:

  • On Amplify, the root path of the website (/index) works fine, and the static files are loaded ___.amplifyapp.com/
  • But when I go to the other path (/register for example), it cannot load the static files ___.amplifyapp.com/register
  • I notice that when loading static files, the pathname was automatically added to all the paths to the static files (in this case /register was added: the true path would be https://myuser.amplifyapp.com/global/js/Base.js/ instead of https://myuser.amplifyapp.com/register/global/js/Base.js/)

2. My source code structure like this:

|   app.js
|   package-lock.json
|   package.json
+---bin
+---dist
|   |   app.js
|   |   error.ejs
|   |   index.html
|   |   package.json
|   |   register.ejs
|   |   verify.ejs
|   +---assets
|   +---global
|   +---javascripts
+---node_modules
+---public
|   +---assets
|   +---global
|   +---javascripts
|   index.html
+---routes
\---views
  • In app.js I already set the static folder for 'public':
app.use(express.static(path.join(__dirname, 'public')));
  • In register.ejs I currently set the link to the static files like this:
<link rel="stylesheet" href="global/vendor/animsition/animsition.css">
<script src="global/vendor/animsition/animsition.js"></script>
  • The build command I set in package.json (it copies all the necessary files and folders for deployment):
"build": "del-cli dist && mkdir dist && ncp public dist && ncp views dist && copyfiles app.js dist && copyfiles package.json dist"
  • I use Github to store my source code and deploy my app using AWS Amplify Console, by creating an application and connecting it to Github repository. This method allows my app is always re-deployed whenever I make change and push to Github. The config in amplify.yaml is:
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3. What I have tried: I have read a lot of issues in stackorverflow and followed their suggestions, but nothing works.

  • I already tried to add '/' or '../' to the link to the static files:
<link rel="stylesheet" href="/global/vendor/animsition/animsition.css">
<script src="/global/vendor/animsition/animsition.js"></script>
  • I tried to pass the specific path as mentioned by this post
  • I also tried to set static for the folders in public such as assets, global but nothing better
  • I also moved all the views from views folder to public folder and change the views setting in source code, but the result was still the same: Everything works fine in localhost but failed when deployed to AWS Amplify.

How do I fix this issue? I would appreciate any advice from you. Thanks so much!

1 Answers

AWS Amplify is static web hosting service (only frontend), it’s not for nodejs + ejs.
it means you couldn’t create a server with specific port number in amplify with express, but amplify allow you use express to build REST api but not to render page.
I think you should put your website into EC2, instead of amplify.
You could take a look Amplify faqs

Related