# 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.

![](/files/-LCd1lLkmqNhINRjB6I_)

### 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
```

![](/files/-LCd1lNM-a-fz188JUXc)

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
```

![](/files/-LCd1lQkrJsA8AgG7uZs)

### Download the react app

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

![](/files/-LCd1lSRKgeJ_SbRQYtr)

### 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.

![](/files/-LCd1lUgrQvNsECiXyBS)

### Update your local host file

![](/files/-LCd1lWuRr6PEZIYWD01)

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
```

![](/files/-LCd1l_dIZqDXiORDNnr)

![](/files/-LCd1laxPBjUos0kDL4n)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://omalab.gitbook.io/engineering-wiki/setup/setting-up-front-end-in-ubuntu-1604-desktop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.