1- Create React App

First, we need to create the React application npx create-react-app treasure (check full documentation: https://github.com/facebook/create-react-app).

Then, go to the project folder and npm run start to run our project in a local environment.

2- Add Sass and SemanticUI

As default our app supports css, but we can give it extra power and use Sass. For managing our styles, we need to install npm install node-sass -s -with this we can use Sass in our project right now.

Now, we need to change the name of our styles files from .css to .scss

For example, we can have a general file for importing and managing all our styles files with Sass for each React component.

this is index.scss in our rout path.

Now, let’s see a bit of SematincUI-React.

https://github.com/Semantic-Org/Semantic-UI-React

npm install semantic-ui-react -s

After installing the library, we can import and use any component easily.

This is an example for use the Loader Component:

Here I’m creating a Loading component and I’m using Segment, Dimmer y Loader from SemanticUI. Also, we can override the styles for each component, in this case, I add a className prop to Segment component to give them specific styles rules.

3- Firebase integration

I’m gonna try to be more practical in this case:

install firebase npm install firebase -s

(this part is a suggestion) create a folder in src, and call it config, then, inside config, create a file firebase.js, here is the place where we’re gonna initialize firebase and put the configuration keys.

The configuration file (config/firebase.js):

Here we have the only import call for firebase library.

We’ve got an object with the ‘secrets’ of our firebase application. (to get this, we need to create an application in https://firebase.google.com/ , it’s free)

With firebase.initializeApp(config) we initialize the application with our environment variables. And we have a file called .env in our root path.

This is an example of the file .env:

Thus we can upload our code without exposing our credentials in the code.

At the end of the firebase file configuration, we can see that we are exporting some functions to expose them to the project. In this case, we have a reference to Auth, google login, treasures list and users list.

So, to use firebase in any place in our project, we can do it this way:

import { treasuresRef, authRef } from “../../config/firebase”;

And from here, we can use the official documentation from firebase for creating functions in our components.

Here I’m getting a Treasure by id, and setting with a new object, after that I’m calling two functions.

4- Configure unit tests with jest/enzyme

install npm install -s enzyme enzyme-adapter-react-16 react-test-render

Create a file in src path: setupTests.js

import { configure } from 'enzyme';

import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });

Ready! Now, we can create our unit test with enzyme.

This is a basic example of the Loading Component.

We can check our tests running npm run test in the terminal.

Also, we can check the details of our tests and check our coverage running:

npm run test -- --coverage

Or also you can modify package.json y run npm run coverage

acá creamos el script ‘coverage’

When we run the coverage command we gonna see some like this:

5- Upload our project to Gitlab

This is so fast, we create an account (free) in Gitlab, then click on new project

In the blank project tab we can configure the name and privacy for the project.

In this part your repository is ready, but we need to ensure that we can upload the code from our terminal using git.

Maybe you are using a new account on Gitlab, you gonna see an orange bar on top of the website, you need to create your ssh key https://gitlab.com/profile/keys

Follow this instruction: https://gitlab.com/help/ssh/README#generating-a-new-ssh-key-pair to get a new ssh key

this is basically:

ssh-keygen -t ed25519 -C “email@example.com”

the run some of this command (that depends on your OS)

Back to the shh keys screen on Gitlab and paste your clipboard content (ssh key generate and copied from you terminal)

Save this ! and you can check in your terminal if this is working.

if all is ok, you gonna see a success message.

In my case, I’m registered with a google login, so on top of the screen I saw another orange bar for change/create the password for my google email (for security reasons).

Now, for upload our react project to Gitlab repository, we need to follow the steps in the homepage of the project: (is similar to this)

After that, you can check your project files in Gitlab! :D

6- Deploy in Netlify

Go to https://www.netlify.com/ and create a free account.

Then, click on New site from Git

So, in this screen select Gitlab. then Netlify gonna ask us for permission for access to our Gitlab repositories.

In our case we need to put the following configuration for the deploy our react application:

Click on Deploy site!!

Now our application is deploying, after that, we gonna see in the dashboard for our application the status of the deploy process.

When is done, Netlify gives us a random domain for our project.

With this, we are ready!

The project is connected with Gitlab, and when we make a Merge Request (or pull request if you come from bitbucket), and the merge is done, automatically Netlify gonna deploy the changes.

Now, if you remember, our project has environment variables for the firebase configuration. and also our application is a SPA and for this reason, we need to do some changes:

First, netlify has some rules for managing the routes in a SPA (in my project I’m using react-router), so, when I access to any route directly (/treasure for example) i gonna see a 404 page.

https://www.slightedgecoder.com/2018/12/18/page-not-found-on-netlify-with-react-router/

You can solve this creating a file called _redirects in the public folder with this content:

/* /index.html 200

You can check the official documentation for this case: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps

And the last thing is adding the environment variables to Netlify configuration:

In netlify go to settings, and go to build/deploy section for find ‘build environment variables’.

And here just add the same variables that we have in our .env local file.

Save it, a redeploy the application in Netlify.

Now check this and all it’s working! :D

This was a super practical tutorial and review for creating our React application with firebase (also with sass, enzyme), manage our code in gitlab and deploy our application with Netlify.

In the original repository, you can find a simple example for use react-router and simple form validation using formik.

If you have any doubts, just write to me :)