Coder Social home page Coder Social logo

courtlyncodes / business-contacts Goto Github PK

View Code? Open in Web Editor NEW

This project forked from multiverselearningproducts/business-contacts

0.0 0.0 0.0 157 KB

An application serving up business contacts, via Node, Express, and React

JavaScript 72.29% CSS 15.18% HTML 10.62% Dockerfile 1.90%

business-contacts's Introduction

business-contacts

An application serving up business contacts, via Node, Express, and React

๐Ÿ‘‰ Client Dockerfile setup

  1. Locate the client folder directory.
  2. Create a new file named Dockerfile in the client directory.
  3. Copy the following instructions into the Dockerfile:
FROM node

WORKDIR /app

COPY . .

RUN npm install && npm run build

EXPOSE 1234

CMD ["node", "server.js"]
  1. Make sure that all the project files are inside the directory, otherwise the COPY . /app command will not work correctly.

  2. In the terminal, navigate to the project directory and run the following command:

docker build -t project-name 

This command will build the Docker image and tag it as "project-name".

  1. To run the container, use the following command:
docker run -p 1234:1234 project-name

This command will run the container and map the host port 1234 to the container's port 1234.

  1. The service can be accessed via http://localhost:1234

๐Ÿ‘‰ Server Dockerfile setup

  1. Create a new folder named server in your project directory.
  2. Using a text editor, create a new file named Dockerfile in the server folder.
  3. Copy the following instructions into the Dockerfile:
FROM node
ENV NODE_ENV=development
WORKDIR /app
COPY package.json .
RUN npm install 
COPY . .
EXPOSE 3000
CMD [ "node", "server.js" ]
  1. In the terminal, navigate to the server directory and run the following command:
docker build -t server-image 

This command will build the Docker image and tag it as "server-image".

  1. To run the container, use the following command:
docker run -p 3000:3000 server-image

Docker commands:

docker build -t name-of-image
docker run -p matchPort:matchPort name-of-image

Options for Running

Option 1 - Run in development (or just without docker)

The point of this example is not to run the apps independently, but if you prefer, or if you're developing/updating them, you can run them independently:

  • Open 2 terminals
  • In one terminal, run cd server and npm run start-dev (runs in watch mode on port 3000)
  • In the other terminal, run cd client and npm start (runs in watch mode on port 1234)
  • Visit the app at localhost:1234

Option 2 - Running with docker-compose

๐Ÿšจ NOTE ๐Ÿšจ If you have run the app locally first via above commands, you'll need to delete the node_modules directory in at least the client project. (this is because of a bug in one of the dependencies of Parcel, and a different version of Parcel is used in a Linux environment than in a Mac environment)

Once you have created the docker-compose.yml:

  • If not done already, install Docker Desktop
  • run docker-compose up
  • Visit the app at localhost:1234
  • To stop the app: docker-compose down --rmi all (this also removes all images)

business-contacts's People

Contributors

wallacepreston avatar stevenjlance avatar lindaeng avatar courtlyncodes avatar braddefauw avatar si-mv 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.