Introduction Last updated: 2020-09-01

First of all, I would like to thank you for your purchase of React Resume Builder V0.1. in this documentation, I will show you how to work with this front end web app. Don't worry if you are a non-developer this web app is easy to work with. and if you are a developer there is a section in this documentation where you will find all the necessary informations you need to be able continue with the code.

Step by step deployment. Last updated: 2020-09-01

Installation

In this section, you will find all the steps required to install our project.

Node.js

We need to set up our development environment by installing Node.js and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. Node.js Download Here, and Install.

Installing Dependencies

So far we installed our environment, but the app contains a number of external modules. and in order to work we need to install all necessary modules. Luckily its just one command will take care of the rest

Open the command line and type cd "PATH" Replace path with ResumeX path

Example
cd "C:\Users\Jack\Desktop\CV Creator\ResumeX"

Then this command will install our dependencies

npm install

App Configuration

Now our web application is almost ready. the only thing left is configuring the app with our details. like website Meta "title,description,keywords" and also adding logo ads , Google analytics tracking code etc.

Open this file ..\ResumeX\src\conf\configuration.js


							var config = {
								adminEmail:"admin@admin.com",  // The website will consider this email  as an admin 
								brand: {
								  useImg: true,  // 320X70 Preferable Size , replace with true if you want to use image logo. and keep false if you want to keep the logo as text
								  name: "Resumen"
								},
								analyticsTrackingCode:"Analytics Code here", // Google analytics Tracking code , example UA-136932515-1. its found in analytics dashboard. pick an account and go to setting, tracking info, tracking code.
								meta:{
								  title :"Resume Builder V0.1.0, Build a Perfect Resume in 5min ",  // Your website title here
								  description:" Free, Fast & Easy PDF Download. 8+ Professional Resume Templates to Get You Hired Today! Stop Struggling With Word! Choose a Resume Template and Create Your Resume in 5 Minutes.", // Description here ( This one will show up in search engines)
								  keywords:"Resumer Creation, Resume Creator,Resume Builder, Rresume Template, Cv Builder."
								}
							  }
                            

Replace ResumeX with your website name. this will appear as a Logo

Replace Description with your website Description. this will appear in search engine as a description of your website

Keywords you can leave it as is or add more to your needs

Firebase Configuration

Go to you firebase account, and create project

Give your project a name

Disable analytics since we are using in app statistics

Click on this icon to let firebase know that we want to use firebase for web

Give it a name and also check firehosting checkbox since we are going to use it

We are going to need the built in firebase authentification service. Please activate Email Authentication , Google Authentication, Facebook authentication ( This one will need an app secret code, and an app id, you need to create an app in facebook developers tools and get this secret codes from there, You can check in the video how we configured social login in depth )

We need to change the security rules in firestore. with the one included with the project ( securityRules.txt)

If you have a cutom domain you need to authorize your domain in Sign in option in authentication page

We need to connect our app with firebase and this needs to be done from /Resumen/.env file. we need to replace the data from firebase into ".env" file. Copy the values from firebase into .env file.

Deployment

Now our app is ready for deployment. We will use firebase hosting to host our app ( You can use a server of your own but we want this app to be beginners friendly so Firebase is the way for a quick deploy and its FREE up to 10GB of bandwith per month)

I will assume that you already have a firebase account and created a project

Use below command to install firebase-tools package from command prompt ( Make sure you are in ResumeX Directory )

npm install -g firebase-tools

Once firebase-tools is installed, use below command to log into Firebase

firebase login

Now we need to initiate Firebase project inside our project folder. From command prompt navigate inside your React application project folder and run below command —

firebase init

Once you run that command it will go through few project setup steps and questions —

? Are you ready to proceed? Yes

Navigate by up and down arrow key and select “Hosting: Configure and deploy Firebase Hosting sites” option by pressing space bar.

In next step we use an existing project ( the one i assumed you created before from your firebase dashboard )

Select your firebase project

Next it will ask us for the location of public folder. Firebase hosting expects all content of web application inside a “Public” folder. Inside our project folder we have a folder named Public. But we are not going to mention that as our public folder of Firebase project. Because when we build a React project it puts all it’s content inside a folder called “build”. So we are going to mention build as our firebase project public folder.

And at last it’s going to ask us if we want configure a single-page app. Just type Y and press enter.

And at last it’s going to ask us if we want configure a single-page app. Just type Y and press enter.

Now the initialisation should be done, ( sometimes it ask you if you want to overide index.html just type N)

Building Our App

Now after finishing the configuration of our app and firebase , we need to buil our app. make sure you are in project folder and type this command

npm run build

Deploying

Now our app should be ready for deployment. using this command

firebase deploy

The link of your web app can be found in firebase dashboard. click deployed and you will have your links.

Connect to your own domain

We have already deployed our web application in Firebase hosting successfully. Now if you have a registered domain and you like to connect your app with that domain then continue with the next step.

Open Firebase Console and select Hosting from left hand side menu.

Now click on connect domain button at the right hand side.

In Connect Domain window enter the domain you own and click Continue.

Now click on connect domain button at the right hand side.

Now in verify ownership step you can see it instructing you to add “TXT” record to your DNS provider for verification purpose. Now just copy the Value text. I brought my domain from GoDaddy, if you brought from any other service provider then just log into that service provider’s site and open domain maintenance page.

Click on DNS button.

You will see a set of records are already defined there. Now click on ADD button.

Now under Type select TXT, put value of Host field as “@”, under TXT Value field paste the value you copied from your Firebase console and then click Save.

Once the record successfully saved then go back to your Firebase console and click the Verify button. After successful verification you will see a screen like below

We need to add another 2 records under our DNS settings. Value column will contain IP addresses which we need to add.

First remove any existing A or AAAA records from your DNS Management.

Now add A records same way how we added TXT record earlier.

Type: A

Host: @

Points to: copied value from Firebase console (IP address)

Once both A records successfully added then go back to Firebase Console and click on Finish button. Now your Firebase Hosting dashboard will show your custom domain there.

You may see status against your custom domain is “Pending”. It is because Firebase take few hours to complete all the processes. But it won’t stop you to open your domain in browser. So just click on the link there or type your domain name on browser and you will see your hosted website.

Initially you may see “Your Connection is not Private” error on browser. Just ignore it and continue by clicking Advanced button. It happens because it take some time for Firebase to activate the SSL certificate.

Install Resumen in a vps.

This installation required only if you want to install resumen in your private server. (Operating System : Ubuntu ), Please follow in the tutorial above how we created a firebase account and configured it with ( Security rules, Authentication)

After you finish ( Firebase configuration, Enabled Firebase authentication, Adding Security Rules to Firestore as mentioned in the tutorial video). now you are ready to deploy Resumen to your server

Open .env file and paste your firebase keys (IMPORTANT : make sure to put you own domain in REACT_FIREBASE_DOMAIN, since you are not using firebase hosting)

Install Node.js: ( If a newer version is suggested, install it instead )

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install nodejs

Test Node.js:

$ nodejs -V
v18.3.0

We've successfully installed NodeJs and NPM.
Install Nginx.

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install nginx

Upload Resumen directiory into . (If you cant see this directories you can just creat them)

/var/www/html/

Install all dependencies (Make sure you are in Resumen Directory)

npm install

Build app

npm run build

Now a new folder called build should be in Resumen/build.
Nginx Configuration

sudo nano /etc/nginx/sites-available/react_app

this file should look something like this

server {
server_name your_IP domain.com www.domain.com;
root [PATH of Resumen]/Resumen/build;
index index.html index.htm;
location / {
try_files $uri /index.html =404;
} }

Enable the file by linking to the sites-enabled dir

sudo ln -s /etc/nginx/sites-available/Resumen /etc/nginx/sites-enabled

Restart Nginx Server

sudo ln -s /etc/nginx/sites-available/Resumen /etc/nginx/sites-enabled

Done ! If any problem occured please create a support ticket and we will fix any issue come on your way

Announcement

I would like to inform you that this app is just a starting point into building a very advanced Resume Builder. in the next fiew versions expect +8 templates, Sass System. Payment Gateway. ad much more. and since you are here from the start you will get all this features for free.