Gitlab Pages CI - React App build from subdirectory

Question

I have a project repository that consists of a backend directory and React app frontend. I want the app to be served from Gitlab Page.

MyRepo/
├─ frontend/
│  ├─ src/
│  │  ├─ App.js
│  │  ├─ index.js
│  │  ├─ ...
│  │  ├─ ..
│  │  ├─ .
│  ├─ package.json
├─ backend/
├─ .gitignore
├─ README.md
├─ gitlab-ci.yml
|...
|..
|.

Had the React project been the repository root, I could've deployed it easily with:

image: node

pages:
 stage: deploy
 cache:
   paths:
     - node_modules/
 script:
   - npm install
   - npm run build
   - rm -rf public
   - cp build/index.html build/404.html
   - mv build public
 artifacts:
   paths:
     - public
 only:
   - master

which I successfully tested.

But it isn't. I've tried:

image: node

pages:
 stage: deploy
 cache:
   paths:
     - node_modules/
 script:
   - cd frontend # This
   - npm install
   - npm run build
   - rm -rf public
   - cp build/index.html build/404.html
   - mv build public
 artifacts:
   paths:
     - public
 only:
   - master

And failed. How does one deploy a subdirectory properly?

Answer 1

Move the build folder to the root of the repository, because the artifacts are expected to be in the public folder in the root of the project:

image: node

pages:
 stage: deploy
 cache:
   paths:
     - node_modules/
 script:
   - cd frontend
   - npm install
   - npm run build
   - rm -rf public
   - cp build/index.html build/404.html
   - mv build ../public # this change here
 artifacts:
   paths:
     - public
 only:
   - master