Establishing the exterior façade prior to generating the Docker image

I am currently new to Docker and in the process of dockerizing some applications.

The project structure consists of:

-PlayProject

-------app
----------controllers
----------models
----------views

-------ci
-------conf
-------project

-------public
----------css
----------js
----------img
----------fonts

-------sbt-cache
-------src
-------target

-------front
------------header (npm folder)
------------footer (npm folder)
-------Dockerfile
----*

This project utilizes PlayFramework on the backend with sbt as the build tool, and Reactjs on the frontend. The frontend is composed of two modules - header and footer.

In my Dockerfile, I need to build the frontend modules by running 'npm run build' commands in both header and footer folders to update the public folder before containerizing.

My Dockerfile :

FROM openjdk:8

ENV HEADER front/header
ENV FOOTER front/footer
ENV PROJECT_HOME /usr/src
ENV SBT_VERSION 1.2.1

#install node
RUN  \
        curl -sL https://deb.nodesource.com/setup_4.x | bash  && \
        # install node
        apt-get update && \
        apt-get install nodejs && \
        # confirm successful installation
        node -v && \
        # npm installs automatically
        npm -v

WORKDIR $HEADER/

RUN  \
         echo $(ls -1 $HEADER/) && \
         npm cache clean && \
         npm i && \
         npm run build

WORKDIR $FOOTER/

RUN \
         echo $(ls -1 $FOOTER/) && \
         npm cache clean && \
         npm i && \
         npm run build


RUN mkdir -p $PROJECT_HOME/sbt $PROJECT_HOME/app

WORKDIR $PROJECT_HOME/sbt

# Install curl
RUN \
       apt-get update && \
       apt-get -y install curl && \
       apt-get -y install vim

# Install sbt
RUN \
        curl -L -o sbt-$SBT_VERSION.deb https://dl.bintray.com/sbt/debian/sbt-$SBT_VERSION.deb && \
        dpkg -i sbt-$SBT_VERSION.deb && \
        rm sbt-$SBT_VERSION.deb && \
        apt-get update && \
        apt-get -y install sbt


COPY . $PROJECT_HOME/app
WORKDIR $PROJECT_HOME/app

EXPOSE 9000

I am facing an issue where I am unable to locate the frontend folders and execute my npm commands. Any suggestions on what could be the problem?

Answer №1

Seems like you haven't configured the transfer of your local files to the Docker container, causing no build process to occur.

Consider including the following line: COPY . . before changing the WORKDIR.

Answer №2

It seems that the absolute path for your initial WORKDIR instruction was not set correctly:

In a Dockerfile, the WORKDIR instruction can be used multiple times. If a relative path is specified, it will be relative to the location of the preceding WORKDIR instruction. For example:

WORKDIR /a

WORKDIR b

WORKDIR c

RUN pwd

The final output of the pwd command in this Dockerfile would be /a/b/c.

Referenced from here

You may want to adjust your initial WORKDIR instruction like so:

WORKDIR $PROJECT_HOME/$HEADER
COPY . .
# instead of just WORKDIR $HEADER/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain JSON array by utilizing the Simple Json Library

Here is a glimpse of my JSON data structure. {"Users":[ {"Username":"Admin1", "Password":"123"}, {"Username":"Admin2", "Password":"456"}, {"Username":"Admin3", "Password":"789"} ]} I'm attempting to retrieve all the usernames and passwor ...

Manage each selenium node separately

My current project involves developing an automated test suite using Selenium. I want to create bots that I can control and use to test my webapp. While this task may seem straightforward, I have a specific requirement in mind. I want to be able to spawn S ...

What advantages does NextJS offer that set it apart from other frameworks that also provide Server Side Render solutions?

I'm diving into the world of NextJS and as I explore this topic, one burning question arises: "What is the necessity of utilizing NextJS?" From what I understand, NextJS excels in rendering pages from the server and is heavily reliant on ReactJS. Howe ...

"Errors in Firebase when setting objects in Firestore always slip through undetected

Within my Firebase firestore database, I have implemented a function that is responsible for creating or updating member profiles in the form of JSON objects. While the creation and updating functionalities are working as expected, I am encountering chal ...

Setting the default value for Material UI select widget

Incorporating material ui into my react application has been challenging. Specifically, I am working with the select component and trying to assign initial values to it. Despite attempting to use the useState hook, I have encountered difficulties. The code ...

Waiting patiently for the complete loading of a div in React

Currently, I am retrieving messages from a database and aiming to display them in a chat window. Below is the code snippet: componentDidMount(): socketio.on("message", function(data) { // socketio is initialized outside of class // and the server emi ...

Utilizing Embedded Jetty for Angular URL rewriting

While deploying a WebSocket and an Angular application with Jetty, everything works fine during development. However, I am facing an issue in production where refreshing the frontend or entering a URL results in a 404 error from the server indicating that ...

Issue encountered while attempting to install gatsby-cli: npm ERROR! Unable to execute node-gyp-build due to permission denial

Attempting to install gatsby-cli on WLS2 using npm resulted in failure. Below is the error message received: root@LAPTOP-7EEFPLOM:~# npm install -g gatsby-cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

What is the best way to showcase a collection of items using a table layout in JavaScript?

I am relatively new to React/JS programming and I'm struggling to understand why my code isn't working correctly. My goal is to create a column with rows based on the items in my Array, but only the header of the table is displaying. After looki ...

When running the command "NPM start" in Gulp, you may encounter a situation where a blank page appears with the error message: "Cannot GET /"

I've been following a comprehensive tutorial on setting up a new desktop app using Angular2, Bootstrap, Yeoman, and Gulp. However, I encounter an issue when trying to test the code locally after reaching the frontend task section. Every time I run np ...

The TextField component in React's material-ui library features a white input field

Since I started using material-ui, I have encountered issues with the Textfields. They do not render properly when I copy and paste examples from the website. Here are the packages I installed: yarn add @material-ui/core yarn add fontsource-roboto yarn ad ...

Steps to resolve the issue of "npm WARN deprecated [email protected] : request has been deprecated, see https://github.com/request/request/issues/3142" error on Windows 10

Seeking assistance with setting up Angular 4 on my Windows 10 system. Upon running node -v and npm -v, the version is displayed without any issues. However, when attempting to execute npm install -g @angular/cli, I encounter the following error message: np ...

Implement Material-UI's built-in validation for form submission

I'm in the process of setting up a form with validation: import React from 'react'; import { useForm } from "react-hook-form"; import axios, {AxiosResponse} from "axios"; import {Box, Button, Container, Grid, Typography} ...

Error: The property 'send' cannot be read because it is undefined - Node.js

We have integrated a Node.js package called springedge to handle SMS functionality in our project: npm install springedge Below is the code snippet from the file send_messages.js: var springedge = require('springedge'); var params = { &apos ...

Iron meteor is unable to locate simpl-schema

Currently, I am utilizing iron-meteor to scaffold meteor crud apps while following this informative tutorial. The issue arises after installing aldeed collections and other packages using the command below; iron add twbs:bootstrap aldeed:collection2 aldee ...

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

An issue has been identified with React's HTML input maxLength feature where it does not display an error

Within my form, I have an input field that currently does not include validation for a maximum length. <input type="text" className="form-control" id="company" onBlur= ...

How is it possible that a Python library has the ability to download necessary modules while Java does not offer this functionality

When working with libraries like Selenium, downloading necessary drivers in Java code requires a manual process. Unlike Python, where drivers can be easily downloaded and managed using tools like pip, Java users must manually download the driver executable ...

Learn the best practices for sharing .env values from the main project component to various reusable npm installed components

In recent projects I've worked on using React and Vue.js, I have utilized .env variables to store API URLs for micro services and other configuration settings that are used throughout the root project. However, when it comes to child components insta ...