November 5, 2019

FCC, React-Redux and gitlab pages

I really love FCC. It helped me getting confident with Javascript, HTML and all that, and although I do it slow pace I got to two certifications yet and it’s fun and all…

But.

Sometimes there are buts. I worked through the React and Redux part of the frontend libraries which was really also nice, but it left me back somehow confused, because trying to start the projects of that section I found out:

Hey, this time there’s more then just adding some <script> tags.

But there was hardly any hint about how to set up everything so I can start coding the project. There was a hint towards create-react-app though, and while I like getting to the ground of things and understanding them bottm up before I use convenience functions, after some reasearch attempts Icame to the conclusion that this time I might change that approach and get used to this script.

So I installed node (through nvm, as it appears to be sensible to have the opportunity to have several node versions installed side by side on my system at a later point) and then did a

npx create-react-app my-app

That left me with a already set up tree of modules, source files and what not. So with this I could already start coding. There are all kinds of libraries included, check out their github page.

But - another but - there’s no redux. Youcan add it though:

npm install redux --save
npm install react-redux --save
npm install redux-thunk --save

You can just add the missing stuff on top. Then add the FCC <script> tag to the index.html to have their testing functionality included and let’s go… no wait!

I gotta deploy it so they can test and approve it later. Usually I use gitlab pages for this. And thanks to Josh McArthur I knew how to go about this. I made a few changes, so here is my .gitlab-ci.yml file:

image: node:lts

pages:
  stage: deploy
  before_script:
  - npm install
  script:
  - npm run build
  - mv public public.old
  - mv build public
  artifacts:
    paths:
    - public
  only:
  - master

I changed the image to the node lts version and used npm install to install all dependencies. npm run build builds the app so it can be deployed by movign the files to the folder public.

One thing to mention is that create-react-app doescontain a git init run so you have an initialised git repository from the start, ready with a .gitignore file that excludes everthing unnecessary, including the dependencies. These can easily be installed whereever the sources are pushed to, thisis why we do the npm install run in the .gitlab-ci.yml file.

We’re almost done now. What’s missing is some adjustmentin package.json: I changed thename from my-app to something less abstract, and what is more important, I added a line:

"homepage":"https://<username>.gitlab.io/<repo-name>",

If I don’t specify the place where it will later be published, it won’t work. This is by the wayonly an issue when building, the npm start command that starts a test server on your machine for development will work nonetheless. But on gitlab I first only got a white page…

You can of course also set private to false which should leave you with a public repository on gitlab?

Finally, you have to create the remote repo:

git remote add origin https://gitlab.com/<username>/<repo-name>

Of course you choose the repo-name now.

That’s it, these are my findings so far. Next would be to go and write source files, maybe also see to have the README.md updated to represent what is really going on.

Have fun.

© tonnerkiller

Powered by Hugo & Kiss.