Git Product home page Git Product logo

full-stack-javascript's Introduction

Full Stack JavaScript + Docker Demo

How to run

Simply run make run

General Notes

Bootstrapping JavaScript Apps

To get started, create a directory for the project, here named js-app, and create a basic Dockerfile like so:

FROM node:14.3
WORKDIR /app

You then have to create an entry in the docker-compose file that bind mounts the app's directory to the container's working directory:

js-app:
  image: node:14.3
  volumes:
    - type: bind
      source: ./js-app
      target: /app

You then need to run the container and initialize the project: (host)

docker-compose run --rm js-app /bin/bash

(container)

npm init -y # or create-react-app
npm install <package1> <package2>

*special note: if you are creating a react app with create-react-app, you will want to modify the docker-compose to target the root of the container (/), remove the app directory, and run create-react-app app. After doing this you will need to revert the docker-compose service to look like the one above.

Next, modify the Dockerfile to its final form:

FROM node:14.3
WORKDIR /app
COPY package*.json /app
RUN npm install
COPY . /app/
# the CMD command differes depending on the project
CMD [ "npm", "start" ]

At this point you need to modify the docker-compose file to build with this Dockerfile

js-app:
  build: ./js-app
  volumes:
    - type: bind
      source: ./js-app
      target: /app

Running On a New Machine

tl;dr -> run make install Because the docker-compose.yml file bind mounts the app's directory, it will overwite the contents of the Dockerfile's npm install run command (or any file that is placed in the overwritten directory for that matter). This is normally fine, except on fresh installs or after removing the node_modules directory. To rectify this, you will need to run the container interactively and manually install dependencies: (host)

docker-compose run --rm js-app /bin/bash

(container)

npm install

Please not that this is only an issue for bind-mounted containers. Since you will not be bind-mounting in production, this will not be an issue outside of development. A potential solution to this problem where the results of npm instll don't get overwritten, with the downside that you have to restart the container when deps change, is shown here: https://stackoverflow.com/a/35317425 This is an attractive alternative when there are many developers on a project.

full-stack-javascript's People

Contributors

briand787b avatar sparkfly-brian-d avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.