React Static files Adding headers using serve.js
We have a React based SPA which is served using CMD ["serve", "-s", "./dist", "-p", "8080"] in Docker file.
Then there is a requirement to add CSP headers. We tried configuring an nginx server and application works fine, but the cypress automation tests were failing randomly. Tried lot of options and no difference.
A suggestion found was to override serve by configuring a serve.js which contains this
const handler = require('serve-handler');
const http = require('http');
const server = http.createServer((request, response) => {
// You pass two more arguments for config and middleware
// More details here: https://github.com/vercel/serve-handler#options
return handler(request, response); //{headers }as third param
})
server.listen(3000, () => {
console.log('Running at http://localhost:3000');
});
https://github.com/vercel/serve-handler#headers-array
Folder strucure packages -app-fe-webapp -src -serve.js -Docker
Error when tried with CMD ["node","serve.js"] in docker file.
Error 1
app-fe-webapp-latest | internal/modules/cjs/loader.js:969
app-fe-webapp-latest | throw err;
app-fe-webapp-latest | ^
app-fe-webapp-latest |
app-fe-webapp-latest | Error: Cannot find module 'serve-handler'
app-fe-webapp-latest | Require stack:
app-fe-webapp-latest | - /packages/app-fe-webapp/serve.js
app-fe-webapp-latest | at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
app-fe-webapp-latest | at Function.Module._load (internal/modules/cjs/loader.js:842:27)
app-fe-webapp-latest | at Module.require (internal/modules/cjs/loader.js:1026:19)
app-fe-webapp-latest | at require (internal/modules/cjs/helpers.js:72:18)
app-fe-webapp-latest | at Object.<anonymous> (/packages/app-fe-webapp/serve.js:1:17)
app-fe-webapp-latest | at Module._compile (internal/modules/cjs/loader.js:1138:30)
app-fe-webapp-latest | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
app-fe-webapp-latest | at Module.load (internal/modules/cjs/loader.js:986:32)
app-fe-webapp-latest | at Function.Module._load (internal/modules/cjs/loader.js:879:14)
app-fe-webapp-latest | at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
app-fe-webapp-latest | code: 'MODULE_NOT_FOUND',
app-fe-webapp-latest | requireStack: [ '/packages/app-fe-webapp/serve.js' ]
app-fe-webapp-latest | }
app-fe-webapp-latest exited with code 1
Error 2
Docker file contains
RUN yarn global add serve
RUN yarn add serve-handler
Error
Step 12/16 : RUN yarn add serve-handler
---> Running in 088b0937df97
yarn add v1.22.4
error Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Service 'app-fe-webapp' failed to build: The command '/bin/sh -c yarn add serve-handler' returned a non-zero code: 1
Error 3
same error as above and got a warning
warning Pattern ["serve-handler@^6.1.3"] is trying to unpack in the same destination "/usr/local/share/.cache/yarn/v6/npm-serve-handler-6.1.3-1bf8c5ae138712af55c758477533b9117f6435e8-integrity/node_modules/serve-handler" as pattern ["serve-handler@6.1.3"]. This could result in non-deterministic behavior, skipping.
The serve.js resides in the same directory where Docker resides.
- Am following correctly?
- Is this related to the file path or somehow the serve.js is unable to find the packages.
- When we overriding the serve with serve.js, is there any option we need to specify to use the serve.js
- Is the command used in Docker file are correct ?
OLD :
CMD ["serve", "-s", "./dist", "-p", "8080"]NEW :CMD ["node",serve.js"]
Thanks in advance foe your time.
Thanks
