I have a monorepo setup like:
└── monorepo/
├── package.json
├── apps/
│ └── website/
│ └── package.json
└── packages/
└── elements/
└── package.json
From the monorepo root I'd like to be able to have a command that runs a build watch on the elements package and then concurrently serves up website.
I see that Nx has a run-many command, but that seems more useful if you trying to run a similar command across multiple packages, for example running test on multiple packages at the same time. My situation is different, I want to run build in one and serve in the other.
I'm guessing I'm missing something with the configuration files.
Related
My project structure is:
.
├── Adapter
│ ├── Provider
│ ├── Repository
│ └── view
│ ├── build
│ ├── public
│ └── src
├── Application
├── Entity
├── Feature
└── Util
I want to build everything except the view directory, because it will be built by react, but I want to include the react build directory to the tsc build of the whole project.
right now the way I`m doing it is like this:
Project packege.json
"build": "tsc && mkdir build/Adapter/view && cd src/Adapter/view && yarn build"
React package.json
"build": "react-scripts build && mv build ../../../build/Adapter/view",
Project tsconfig.json
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "**/*.d.ts", "src/Adapter/view/src"]
This works fine (except when the build dir already exists, which is annoying), but i really dislike the method, is there a better way of including the build dir?
Using "react-bootstrap"
import { useAccordionButton } from 'react-bootstrap/AccordionButton';
Gives error message:
Module not found: Can't resolve 'react-bootstrap/AccordionButton'
npm list
bsn-gui#0.1.0 C:\goproj\src\github.com\amortaza\bsn-gui
├── #testing-library/jest-dom#5.14.1
├── #testing-library/react#11.2.7
├── #testing-library/user-event#12.8.3
├── bindings#1.5.0 extraneous
├── bootstrap#5.1.1
├── file-uri-to-path#1.0.0 extraneous
├── nan#2.15.0 extraneous
├── react-bootstrap-validation#0.1.11
├── react-bootstrap#1.6.3
├── react-dom#17.0.2
├── react-scripts#4.0.3
├── react-split#2.0.13
├── react#17.0.2
└── web-vitals#1.1.2
Accordion.Button is available in react-bootstrap v5 (v2.0.0-rc0)
Accordion.Button
You have v4 react-bootstrap#1.6.3 installed.
Uninstall the current version and install latest.
npm uninstall -S react-bootstrap
npm install -S react-bootstrap#2.0.0-rc.0
Your NPM list states you are using react-bootstrap#1.6.3 yet your code is referencing the 2.0.0-rc.0 API. Of course, as with all third-party tools, you must reference the documentation relevant to the version you choose to use. Refer to the proper documentation for 1.6.3, or change your version to 2.0.0-rc.0 if you need that API.
I am currently migrating our monorepo to yarn workspaces. It contains multiple packages and services. Services depends on packages in their respective package.json. I would like to deploy my services to Google App Engine without having to publish the packages to a private npm registry.
I managed to deploy a single service by using a custom runtime and by moving the app.yaml and the Dockerfile to the root of the monorepo in order to have access to the packages and the service in the build context. The issue is that I have multiple services and I cannot have all the dockerfiles at the root of the monorepo, as they have to be named Dockerfile and that I cannot change the build context.
I see 2 naive solutions:
The first would be to move the app.yaml and Dockerfile of the corresponding service to the root of the monorepo before deploying. But this looks quite dirty and would make the CI code very complicated.
The second would be to have a single Dockerfile and service1.yaml, service2.yaml etc. at the root of the monorepo and to pass variables to the Dockerfile. The problem is that I don't see any way in App Engine documentation to pass variables to the Dockerfile of a custom runtime.
My dream solution would be to be able to keep each Dockerfile and app.yaml in the directory of their respective services and to be able to set the build context through the gcloud CLI (like we can do in docker-compose).
Example:
project
├── package.json
├── packages
│ ├── package1
│ │ ├── package.json
│ │ └── src
│ ├── package2
│ │ ├── package.json
│ │ └── src
│ └── package3
│ ├── package.json
│ └── src
├── services
│ ├── service1
│ │ ├── app.yaml
│ │ ├── Dockerfile
│ │ ├── package.json
│ │ └── src
│ └── service2
│ ├── app.yaml
│ ├── Dockerfile
│ ├── package.json
│ └── src
└── yarn.lock
and run something like: gcloud app deploy services/service1/app.yaml --build-context=.
But I don't see any way of doing this in the documentation.
Do you know how I can get closer to my "dream solution"?
Adding possible option suggested in comments to give more visibility.
One possibility would be keeping the docker-compose workflow that you were using and integrate it with your App Engine deploys.
As you were already building your docker images with docker-compose in order to specify the build context, you can push the result of the build operations to Google's Container Registry so the images can be later used to deploy App Engine by using the --image-url flag.
Most of the times I use Docker with volumes. But Now I am trying bind mounts for the first time and they are not working as I expected. I'm probably missing something or maybe not understanding completely they way they work.
Let's take this example. I have a React app created with create-react-app and it will run with a Rails backend based on a MySQL database.
My directory structure is:
App
├── docker
│ ├── api
│ │ └── Dockerfile
│ └── fe
│ ├── Dockerfile
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ ├── README.md
│ └── src
├── docker-compose.yml
I started by creating the docker-compose.yml file like this:
version: "3.7"
services:
web:
build: ./docker/fe/.
ports: ["80:3000"]
volumes:
- type: bind
source: "./docker/fe"
target: "/app"
As you may see, I am mapping the directory ./docker/fe, where the React frontend is, to /app.
Inside ./docker/fe is the Dockerfile:
FROM node:8
WORKDIR /app
RUN npm install
CMD ["npm","start"]
I was expecting this to work, because my app files are all inside /app, mapped to ./docker/fe. At least I thought they would be! But when I run the docker-compose up --build command at the command line I get a build error, because it says there is no package.json file inside the /app directory.
On the other hand, when I use this other version of Dockerfile
FROM node:8
WORKDIR /app
ADD package.json .
ADD package-lock.json .
RUN npm install
ADD . .
CMD ["npm","start"]
this problem won't happen. It will find the package.json file and build the app correctly. But it won't run!
The fact is, it will say it can't find the React scripts. And it is no surprise, since when it is finished there is no node_modules directory inside ./docker/fe as it would be expected after running npm install.
I am confused.
Am I missing something about the bind mounts?
Why do I need to ADD package.json to the WORKDIR if this directory is associated with the host directory where this file already is?
Why I don't have a node_modules directory inside ./docker/fe after npm install?
Docker volumes are only mounted when image is run, not during build phase.
Add these back in to your Dockerfile:
ADD package.json .
ADD package-lock.json .
And/or:
ADD . .
I have created my first react-js app, just saying 'Hello world'. After I change the 'Hello world' to another text, nothing changes when I refresh the browser, even if I empty the cache. The changes take place only when I close the local server and reopen it with npm start. Could anyone help me?
If you want to create new react app from-scratch. You can use :
> npx create-react-app my-app
> cd my-app
> npm start
After that, you will have the initial configured react project structure :
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js
See react app seed in Github : https://github.com/facebook/create-react-app.
Sam's answer is probably the best way to do it but if you want do refresh it without adding all the bells and whistles of create-react-app you can go for browsersync.
https://browsersync.io/
It watches over your CSS, HTML, JS. I usually use create-react-app but in some cases browsersync does the trick as well.