start-angular / SB-Admin-BS4-Angular-8

Simple Dashboard Admin App built using Angular 8 and Bootstrap 4
Other
1.95k stars 1.17k forks source link

Unable to dockerize SB-Admin-BS4=Angular-4 #114

Open kenadet opened 7 years ago

kenadet commented 7 years ago

I am trying to dockerize this app, but unable to do it due to the following errors:

> gulp serve.dev --color

[15:27:36] Requiring external module ts-node/register

/usr/src/app/node_modules/ts-node/src/index.ts:253
          throw new TSError(diagnosticList)
                ^
TSError: ⨯ Unable to compile TypeScript
Cannot find type definition file for 'core-js'. (2688)
Cannot find type definition file for 'express'. (2688)
Cannot find type definition file for 'jasmine'. (2688)
Cannot find type definition file for 'node'. (2688)
Cannot find type definition file for 'protractor'. (2688)
Cannot find type definition file for 'systemjs'. (2688)
gulpfile.ts (1,23): Cannot find module 'gulp'. (2307)
gulpfile.ts (2,23): Cannot find module 'gulp-util'. (2307)
gulpfile.ts (3,30): Cannot find module 'run-sequence'. (2307)
gulpfile.ts (5,20): Cannot find module './tools/config'. (2307)
gulpfile.ts (6,27): Cannot find module './tools/utils'. (2307)
    at getOutput (/usr/src/app/node_modules/ts-node/src/index.ts:253:17)
    at /usr/src/app/node_modules/ts-node/src/index.ts:263:16
    at Object.compile (/usr/src/app/node_modules/ts-node/src/index.ts:398:17)
    at Module.m._compile (/usr/src/app/node_modules/ts-node/src/index.ts:299:46)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/usr/src/app/node_modules/ts-node/src/index.ts:302:14)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
npm info lifecycle Acp@0.0.0~start: Failed to exec start script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Acp@0.0.0 start: `gulp serve.dev --color`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Acp@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.```

My docker file is:

FROM node:8.2.1

RUN mkdir -p /usr/src/app

COPY package.json /usr/src/app/ COPY gulpfile.ts /usr/src/app/ COPY protractor.conf.js /usr/src/app/ COPY test-config.js /usr/src/app/ COPY test-main.js /usr/src/app/ COPY tsconfig.json /usr/src/app/ COPY tslint.json /usr/src/app/ COPY karma.conf.js /usr/src/app/ COPY appveyor.yml /usr/src/app/ COPY tools/* /usr/src/app/

WORKDIR /usr/src/app/

RUN npm install -g bower \ && npm i -g gulp-cli \ && npm i typings@1.3.3 --save-dev \ && npm i typescript-node --save-dev\ && npm i typescript-register --save-dev\ && npm i typescript-require --save-dev \ && npm i typescript@2.0.2 --save=dev \ && npm install ts-node@1.3.0 --save-dev \ && npm install gulp --save-dev \ && npm install --production \ && ln -s /usr/local/bin/gulp /usr/bin/gulp \ && apt-get -qqy clean && rm -rf /var/cache/apt/*

COPY dist/* /usr/src/app/

EXPOSE 5555

CMD ["npm", "start"]



Any clue if this has been done already. I will appreciate help in solving this for this or similar apps built from it.
bb1 commented 6 years ago

I'm not sure if you still need help but in case you do:

If you use the normal Angular build process (ng build --prod) you don't need TypeScript anymore. Angular uses webpack to pack everything into a few handy JavaScript files (including all of the dependencies). I'm not really sure what you try to archive here. This is a pure front-end framework so you don't need ts-node (a typescript-node.js server) at any point. You need to call the angular build process and move it's output into your server's "public"-path.

I hope this helps a little bit.

kenadet commented 6 years ago

Thanks bb1, I was a able to solve the problem by using this Dockerfile:

#  Create a new image from the base nodejs 7 image.
FROM node:7
# Create the target directory in the imahge
RUN mkdir -p /usr/src/app
# Set the created directory as the working directory
WORKDIR /usr/src/app
# Copy the package.json inside the working directory
COPY package.json package-lock.json /usr/src/app/
# Install required dependencies
RUN npm install
# Copy the client application source files. You can use .dockerignore to exlcude files. Works just as .gitignore does.
COPY . /usr/src/app
# Open port 4201. This is the port that our development server uses
EXPOSE 4201
# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

I have not tried yours, perhaps you could provide the tested Dockerfile as well. Thanks.