I have this dockerservice:
client/
.dockerignore
Dockerfile-dev
package.json
node_modules/
react-router-dom/
spotify-web-api-js/
and-many-more/
src/
App.jsx
Spotify.js
which installs the following node modules:
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"spotify-web-api-js": "^0.22.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1"
}
}
like so:
Dockerfile-dev
# base image
FROM node:11.6.0-alpine
# set working directory
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts#2.1.2 -g --silent
# start app
CMD ["npm", "start"]
at the same path, src, however, I'm observing two different behaviours:
1) this works:
App.jsx
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
2) but this does not work:
Spotify.js
import React, { Component } from 'react';
import SpotifyWebApi from 'spotify-web-api-js';
throwing the following error:
Failed to compile
./src/Spotify.js
Module not found: Can't resolve 'spotify-web-api-js' in '/usr/src/app/src'
docker-compose-dev.yml
client:
build:
context: ./services/client
dockerfile: Dockerfile-dev
volumes:
- './services/client:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- 3007:3000
environment:
- NODE_ENV=development
- REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
depends_on:
- web
.dockerignore
node_modules
coverage
build
env
htmlcov
.dockerignore
Dockerfile-dev
Dockerfile-prod
what am I missing?
Hope this helps someone it works for me run
docker-compose down -v
It removes all volumes.
Related
I am trying to setup unit tests for our Docusaurus instance. I am unable to load any of the Docusaurus modules during testing. Another user had the same issue and his fix does allow me to get past the #theme/Layout error.
However, I am also getting the error when I try to test any components that use #docusaurus/router. I am using the router in my code for some page redirects so I need to be able to interact with in my tests.
I'm sure its something I'm doing wrong with how I setup Jest. I suspect me using react-scripts is probably what's causing thing to go crab.
I am able to replicate this using these steps:
npx create-docusaurus#latest unit-tests classic --typescript
yarn add #testing-library/react #types/jest jest react-scripts react-dom --dev
Adding a test script to the package.json.
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc",
"test": "react-scripts test"
},
Then adding a simple unit test:
import { render } from '#testing-library/react';
import Home from './index';
describe('<index>', () => {
it('should', () => {
render(<Home />);
});
});
Here's my entire package.json
{
"name": "unit-tests",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc",
"test": "react-scripts test"
},
"dependencies": {
"#docusaurus/core": "2.0.0-beta.18",
"#docusaurus/preset-classic": "2.0.0-beta.18",
"#mdx-js/react": "^1.6.22",
"clsx": "^1.1.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^18.0.0"
},
"devDependencies": {
"#docusaurus/module-type-aliases": "2.0.0-beta.18",
"#testing-library/react": "^13.1.1",
"#tsconfig/docusaurus": "^1.0.5",
"#types/jest": "^27.4.1",
"jest": "^27.5.1",
"react-scripts": "^5.0.1",
"typescript": "^4.6.3"
},
"jest": {
"coverageReporters": [
"json",
"text",
"lcov"
],
"resetMocks": false
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Edit
Its not react-scripts. I changed the yarn script to be just "test": "jest" and I get this error now:
● Test suite failed to run
src/pages/index.tsx:3:20 - error TS2307: Cannot find module '#theme/Layout' or its corresponding type declarations.
3 import Layout from '#theme/Layout';
~~~~~~~~~~~~~~~
src/pages/index.tsx:4:18 - error TS2307: Cannot find module '#docusaurus/Link' or its corresponding type declarations.
4 import Link from '#docusaurus/Link';
~~~~~~~~~~~~~~~~~~
src/pages/index.tsx:5:34 - error TS2307: Cannot find module '#docusaurus/useDocusaurusContext' or its corresponding type declarations.
5 import useDocusaurusContext from '#docusaurus/useDocusaurusContext';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/pages/index.tsx:6:20 - error TS2307: Cannot find module './index.module.css' or its corresponding type declarations.
6 import styles from './index.module.css';
~~~~~~~~~~~~~~~~~~~~
I've written a react app with a banch of different urls using component and I'm trying to deploy it using docker. While the main page loads the rest of them don't. When I run npm run build everything works fine so the problem is probably in my Dockerfile. The error I get is 404 Not Found nginx/1.21.4
# build environment
FROM node:14.18.1 as build
WORKDIR /app
# ENV PATH /app/node_modules/.bin:$PATH
#COPY package.json /app/package.json
#RUN npm install --silent
#RUN npm install react-scripts#3.0.1 -g --silent
#COPY . /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build
# production environment
FROM nginx:1.21.4-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx","-g", "daemon off;"]
The comments are my previous attemps thet didn't work
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-cli": "^9.1.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
}
}
nginx.config
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
My Dockerfile was wrong the correct one is:
# build environment
FROM node:14.18.1 as build
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm ci
RUN npm run build
# production environment
FROM nginx:1.21.4-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [ "nginx","-g", "daemon off;"]
I am trying to dockerize my small reactjs app.
This is my Dockerfile
FROM node
WORKDIR /usr/src/app
COPY package.json .
COPY . .
EXPOSE 8080
RUN npm install // gives the error when executing this step
RUN npm install react-scripts#3.4.1 -g --silent
# start app
CMD ["npm", "start"]
And this is my package.json
{
"name": "cyberhr",
"version": "0.1.0",
"private": true,
"dependencies": {
"3d-force-graph": "^1.60.11",
"#tensorflow/tfjs": "^1.7.2",
"#tensorflow/tfjs-tsne": "^0.2.0",
"d3-dsv": "^1.2.0",
"mdbreact": "4.25.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-force-graph": "^1.32.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"tsne-js": "^1.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
},
"devDependencies": {
"renamer": "^1.0.0",
"rimraf": "^2.6.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
But it fails at the npm install step and gives the following error
Service 'frontend' failed to build: The command '/bin/sh -c npm install' returned a non-zero code: 244
Here is a screenshot of the error in detail
Can someone please help me?
In my case, I also had to copy package-lock.json to the Dockerfile and it worked. I only had to do this though when running npm install gave me vulnerabilities.
Try:
COPY package.json package-lock.json .
I have created a new github repository with files from a working project I downloaded from another github repository of mine. I have run npm install. When I try npm start, I get the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! /home/mycomputername/.npm/_logs/2020-03-22T17_16_37_070Z-debug.log
I have read in other posts that the problem might be in the 'scripts', 'start' package.json file. This is what mine looks like:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap-4-grid": "^3.2.0",
"formik": "^2.1.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-spring": "^8.0.27",
"use-places-autocomplete": "^0.5.4",
"yup": "^0.28.1"
},
"scripts": {
"start": "react-scripts start", //supposedly problematic
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried changing the start script to "start": "index.js" or "start": "App.js" as they're my main file but I have no clue whether I am doing the right thing.
If I run npm run this is what I get
Lifecycle scripts included in mycomputername:
test
echo "Error: no test specified" && exit 1
| npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) /home/mycomputername/.config |
Moreover, this repository will be shared with other people -- will they have the same problem when they clone from my repository?
I used the following command to run the container :
docker run -p 3333:3333 -d maill/node-web-app
Here is the result of docker ps :
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f26270107bfa maill/node-web-app "npm run dev" 49 seconds ago Up 46 seconds 0.0.0.0:3000->3000/tcp musing_fermi
However when I try to access webserver on host using localhost:3333 it doesn't work.
I am using windows 10 pro.
docker logs musing_fermi shows:
DONE Compiled successfully in 3541ms16:04:50 | OPEN localhost:3000
Dockerfile :
FROM node:8
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm i
COPY . .
EXPOSE 3333
CMD [ "npm", "run", "dev" ]
package.json :
{
"name": "webapp-pst-horizon",
"version": "1.0.0",
"description": "Webapp pour les formations enedis",
"author": "Léo Coletta",
"private": true,
"scripts": {
"dev": "cross-env HOST=0.0.0.0 PORT=3333 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/proxy": "^1.2.4",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cookie": "^0.3.1",
"js-cookie": "^2.2.0",
"nuxt": "^1.4.1",
"vuetify": "^1.0.19",
"webpack": "^3.1.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"cross-env": "^5.2.0",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.5.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
}
}
Based on what you have in the question so far, and that you have OPEN localhost:3000 coming from your container logs, I'd guess your application is listening on localhost. This is != localhost outside the container. You need to configure your application to listen on 0.0.0.0 inside the container.
To go along with johnharris85's answer, add the following to your package.json:
From nuxt documentation on "How to edit HOST and PORT?"
You can configure the PORT with 3 different ways:
...
...
Via a nuxt config in the package.json:
Inside your package.json:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
},
"scripts": {
"dev": "nuxt"
}