Skip to content

Instantly share code, notes, and snippets.

@kud
Last active Apr 12, 2021
Embed
What would you like to do?
Publish your create-react-app website via Gitlab CI. tags: #gitlab #git #deploy #ci
image: node:6.5.0 # can be upgraded, depending on your node version used
pages:
stage: deploy
script:
- npm install
- npm run build
- rm -rf public
- mv build public
artifacts:
paths:
- public # mandatory, other folder won't work
only:
- master # or dev, the branch you want to publish
@calvinw

This comment has been minimized.

Copy link

@calvinw calvinw commented Jan 1, 2017

Nice!!

Just an addition. I was able to get this working in gitlab by adding the line:
"homepage": "https://user.gitlab.io/projectname",

to the package.json. This is the same fix that is needed to publish to github pages.

Thanks for putting this up!

@kud

This comment has been minimized.

Copy link
Owner Author

@kud kud commented Apr 7, 2017

@calvinw Thanks. Good to know. :)

@ReneCode

This comment has been minimized.

Copy link

@ReneCode ReneCode commented Dec 6, 2017

Thanx, that helps me to get started.

@yarnball

This comment has been minimized.

Copy link

@yarnball yarnball commented Jan 20, 2018

Nice one!

If you want to speed up the build pipeline, cache your node_modules folder (as per below) 👍

Note: gitlab takes a few minutes after the pipeline passes for your page to appear.

image: node:6.5.0 # can be upgraded, depending on your node version used
 
pages:
  cache:
    paths:
    - node_modules/
 
  stage: deploy
  script:
  - npm install
  - npm run build
  - rm -rf public
  - mv build public
  artifacts:
    paths:
    - public # mandatory, other folder won't work
  only:
  - master # or dev, the branch you want to publish
@chandresh87

This comment has been minimized.

Copy link

@chandresh87 chandresh87 commented Apr 12, 2018

Hi ,

I did the same but when I am trying to hit the homepage URL it is giving me 404. Please help.
I am doing something wrong with setting up of homepage ?
"homepage": "https://gitlab.com/app_name"

My project is saved in repo as https://gitlab.com/xyz/app_name

@sh4hids

This comment has been minimized.

Copy link

@sh4hids sh4hids commented Jun 27, 2018

@chandresh87 you did a little bit wrong. The homepage url will be:

"homepage": "https://xyz.gitlab.io/app_name"
@aleturolla

This comment has been minimized.

Copy link

@aleturolla aleturolla commented Nov 9, 2018

Hi,
I used your config and the pipeline passed correctly.
I set my GitLab Pages homepage via package.json like @calvinw suggested, but I can't see anything on my page...

Can you help me?


EDIT: Solved it! It was a problem with React Router.
Since my homepage is https://xyz.gitlab.io/project-name/, I had to set the basename prop of BrowserRouter to /project-name.

I just leave the comment here, if someone encounters the same problem!

@CoderGregH

This comment has been minimized.

Copy link

@CoderGregH CoderGregH commented Dec 30, 2018

Hi,
I used your config and the pipeline passed correctly.
I set my GitLab Pages homepage via package.json like @calvinw suggested, but I can't see anything on my page...

Can you help me?

EDIT: Solved it! It was a problem with React Router.
Since my homepage is https://xyz.gitlab.io/project-name/, I had to set the basename prop of BrowserRouter to /project-name.

I just leave the comment here, if someone encounters the same problem!

Very helpful @aleturolla that saved me some time today.

@rohanarihant

This comment has been minimized.

Copy link

@rohanarihant rohanarihant commented Jan 15, 2019

Hi,
I have created a sample application using create-react-app.I was facing the same 404 error, then I set the basename prop of BrowserRouter as suggested by @aleturolla after that I start working.
application link :- https://gitlab.com/Rohanarihant/mobx

@Pacodastre

This comment has been minimized.

Copy link

@Pacodastre Pacodastre commented Mar 26, 2019

@FoteiniK

This comment has been minimized.

Copy link

@FoteiniK FoteiniK commented Apr 26, 2019

Thank you @aleturolla this was extremely helpful!! I also had to add my homepage to package.json. @kud thanks for sharing this, it helped me to get started!

@diwakar-s-maurya

This comment has been minimized.

Copy link

@diwakar-s-maurya diwakar-s-maurya commented Jun 16, 2019

Thank you @calvinw.

@carloscastilloc2o

This comment has been minimized.

Copy link

@carloscastilloc2o carloscastilloc2o commented Mar 11, 2020

Hi,
I used your config and the pipeline passed correctly.
I set my GitLab Pages homepage via package.json like @calvinw suggested, but I can't see anything on my page...

Can you help me?

EDIT: Solved it! It was a problem with React Router.
Since my homepage is https://xyz.gitlab.io/project-name/, I had to set the basename prop of BrowserRouter to /project-name.

I just leave the comment here, if someone encounters the same problem!

Thanks!

@Suchana34

This comment has been minimized.

Copy link

@Suchana34 Suchana34 commented Apr 4, 2020

Hi,
I used your config and the pipeline passed correctly.
I set my GitLab Pages homepage via package.json like @calvinw suggested, but I can't see anything on my page...

Can you help me?

EDIT: Solved it! It was a problem with React Router.
Since my homepage is https://xyz.gitlab.io/project-name/, I had to set the basename prop of BrowserRouter to /project-name.

I just leave the comment here, if someone encounters the same problem!

Thankyou so much !!!!

@aliwo

This comment has been minimized.

Copy link

@aliwo aliwo commented Apr 14, 2020

Thank you! you saved my hour! @calvinw

@Robyt96

This comment has been minimized.

Copy link

@Robyt96 Robyt96 commented Apr 12, 2021

Hi,
I used your config and the pipeline passed correctly.
I set my GitLab Pages homepage via package.json like @calvinw suggested, but I can't see anything on my page...

Can you help me?

EDIT: Solved it! It was a problem with React Router.
Since my homepage is https://xyz.gitlab.io/project-name/, I had to set the basename prop of BrowserRouter to /project-name.

I just leave the comment here, if someone encounters the same problem!

This worked for me too, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment