Last active
December 2, 2022 16:29
-
-
Save GarrickBee/aa8d07ee07796ab51509887993016788 to your computer and use it in GitHub Desktop.
GitLab Pages With React Router For Free
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| build: | |
| image: node:14.15.3-buster-slim | |
| stage: build | |
| script: | |
| - yarn install | |
| - yarn build | |
| artifacts: | |
| paths: | |
| - build/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| stages: | |
| - build | |
| - deploy | |
| build: | |
| image: node:14.15.3-buster-slim | |
| stage: build | |
| script: | |
| - yarn install | |
| - yarn build | |
| artifacts: | |
| paths: | |
| - build/ | |
| pages: | |
| image: alpine:latest | |
| stage: deploy | |
| variables: | |
| GIT_STRATEGY: none # Do not clone git repo | |
| NODE_ENV: production | |
| PUBLIC_URL: http://gitlab-react-page.garrick.monster | |
| script: | |
| # Rename the CRA `build` folder to `public` | |
| - mv build public | |
| - cp public/index.html public/404.html | |
| artifacts: | |
| paths: | |
| - public |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function App() { | |
| return ( | |
| <div className="App"> | |
| <header className="App-header"> | |
| <img src={logo} className="App-logo" alt="logo" /> | |
| <p>Gitlab Pages With React Router</p> | |
| <a | |
| className="App-link" | |
| href="https://reactjs.org" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| Learn React | |
| </a> | |
| </header> | |
| </div> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { HashRouter, Switch, Route, Link } from "react-router-dom"; | |
| import logo from "./logo.svg"; | |
| import "./App.css"; | |
| function App() { | |
| return ( | |
| <div className="App"> | |
| <header className="App-header"> | |
| <img src={logo} className="App-logo" alt="logo" /> | |
| <p>Gitlab Pages With React Router</p> | |
| <HashRouter basename="/"> | |
| <Switch> | |
| <Route exact path="/"> | |
| <Link to="/second-path"> Second Path</Link> | |
| <Link to="/third-path"> Third Path</Link> | |
| <p>I am Home Path</p> | |
| </Route> | |
| <Route path="/second-path"> | |
| <Link to="/"> Home Path</Link> | |
| <Link to="/third-path"> Third Path</Link> | |
| <p>I am Second Path</p> | |
| </Route> | |
| <Route path="/third-path"> | |
| <Link to="/"> Home Path</Link> | |
| <Link to="/third-path"> Third Path</Link> | |
| <p>I am Third Path</p> | |
| </Route> | |
| </Switch> | |
| </HashRouter> | |
| </header> | |
| </div> | |
| ); | |
| } | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| pages: | |
| image: alpine:latest | |
| stage: deploy | |
| variables: | |
| GIT_STRATEGY: none # Do not clone git repo | |
| NODE_ENV: production | |
| PUBLIC_URL: https://garrick-open-source.gitlab.io/gitlab-pages-with-react-router | |
| script: | |
| # Rename the CRA `build` folder to `public` | |
| - mv build public | |
| - cp public/index.html public/404.html | |
| artifacts: | |
| paths: | |
| - public |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment