> For the complete documentation index, see [llms.txt](https://omalab.gitbook.io/engineering-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://omalab.gitbook.io/engineering-wiki/setup/setting-up-front-end-in-ubuntu-1604-desktop.md).

# Setting up front end in Ubuntu 16.04 desktop

## Introduction

Install of Front end react app on Ubuntu 16.04 could be tricky. After few struggle, I could able to set up everything. Through this document, I am trying to give a step by step process to do it. There are certain challenges that I shall mention and how to avoid the same.

## Useful URL

Front end react app can be downloaded /cloned from <https://github.com/omalab/react-app>.

Docker installation:

* Prerequisite: <https://docs.docker.com/install/linux/docker-ce/ubuntu/>
* Installation <https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce>

## Installation steps

### Install Docker

Follow the instruction given on the above given URL. I have installed the following version of docker.

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lLkmqNhINRjB6I_%2FDockerVersion.png?generation=1526475726480038\&alt=media)

### Install Node and NPM

Install nodejs and npm could be tricky. It is important that we should install the latest versions. Follow this URL for latest instructions: <https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions>

Installing Nodejs 9:

```
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs
```

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lNM-a-fz188JUXc%2Fnode_NPM_Version.png?generation=1526475726429559\&alt=media)

This URL can be useful as well: <https://askubuntu.com/questions/594656/how-to-install-the-latest-versions-of-nodejs-and-npm>

> Note: npm is bundled with nodejs now.

### Install yarn

Follow the instruction from here to install yarn: <https://yarnpkg.com/lang/en/docs/install/>

* On Debian or Ubuntu Linux, you can install Yarn via our Debian package repository. You will first need to configure the repository:

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```

* On Ubuntu 16.04 or below and Debian Stable, you will also need to configure[the NodeSource repository](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)to get a new enough version of Node.js.

Then you can simply:

```
sudo apt-get update && sudo apt-get install yarn
```

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lQkrJsA8AgG7uZs%2FyarnVersion.png?generation=1526475732304426\&alt=media)

### Download the react app

Download the react app on a desired folder and extract it. Typical folder structure should look like this:

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lSRKgeJ_SbRQYtr%2FreactAppFolderStructure.png?generation=1526475729747797\&alt=media)

### Update the environment file

Update the environment file with desired entries. (Get the entry from your manager). If you are doing it for the first time, you will find a file name called .env.sample. Please rename that as .env file.

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lUgrQvNsECiXyBS%2Fenvironment.png?generation=1526475726522977\&alt=media)

### Update your local host file

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1lWuRr6PEZIYWD01%2FLocalHost.png?generation=1526475726461957\&alt=media)

Update your local host with following entry:

```
127.0.0.1 www.omaengine.dev
```

### Launch the app through yarn

Navigate to the folder and launch the application through yarn

```
cd ~
cd ~/Documents/Audienti/react-app-master
yarn start
```

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1l_dIZqDXiORDNnr%2FyarnStart.png?generation=1526475726478709\&alt=media)

![](https://2306515219-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LCd1e9XUEr1zK7apGWd%2F-LCd1ip-KVXy9aMZySiy%2F-LCd1laxPBjUos0kDL4n%2Fwebsite.png?generation=1526475729180080\&alt=media)