T﻿he trick to this is knowing that under the hood, Azure web apps that are running on Linux use the PM2 process manager to keep the web app online.

O﻿nce this is understood, the solution becomes relatively simple as the [PM2 documentation](https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml) itself makes mention of how to handle SPA applications. This will then make sure that all URL requests are redirected to the index.htrml file, which in our case is the React index.

F﻿or our Azure web app, all we need to do is update the start-up command to let PM2 know we are running a SPA application:

```textile
// Start up command needs to be:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
```

T﻿o do this for your Azure web app, open the app in the portal, navigate to configuration, then general settings then Startup Command.

![Azure-portal-app-config-settings](/assets/screenshot-2024-02-19-at-7.01.43 pm.png "Azure Portal App Config Settings")

A﻿fter saving this setting, restart the web app and you will be able to navigate tothe routes configured in your React App.

Publishing a react app to Azure web apps is fairly trivial. However, when the web app is running Linux and the React app is using the React Router for a SPA application, the default configuration does not work.

Publishing a React App with Routing to a Linux Azure Web App

Arrays are one of the most common data structures you will use in Javascript. They create lists for displaying to users that can be simple or contain complex data objects. Creating lists that have clean information in them is vital for a good user experience. One way to do this is to make sure you are not displaying the same information multiple times.

## Arrays Containing Simple Data

As mentioned above, arrays in Javascript can be made up of simple data items such as numbers, strings or booleans. Arrays containing these sorts of data entities are much simpler to clean up to ensure only distinct values are remaining.

For Javascript arrays of simple types, there are two magic features built into the language that will remove duplicates in an array for you. These two items are:

\- The Set object, which is a collection of values like an array, however, the Set object differs from an array as it is inherently unable to store non-unique values. This makes it an ideal object to use for removing duplicate values. 

\- The spread operator, written as: `...array.` In this use case, the spread operator essentially takes each item in the set and passes it as an item to be added to the array in its internal constructor, so that the resulting array is made up of each item in the Set object.

```typescript
const duplicatesArray = [1,1,1,1,2,2,3,4,5,6,6,6,6];
const uniqueArray = [...new Set(duplicateArray)];
// console.log(uniqueArray) => [1, 2, 3, 4, 5, 6]
```

It is also important to note that the above code will **not** mutate the original array, meaning that the duplicatesArray constant still contains all the original entities. The unique items are stored separately in a new array.

## Arrays Containing Objects with Multiple Properties

Unfortunately, removing duplicate objects is not as simple as the above for non-complex types. This is mostly because of the way Javascript handles objects in general. Each object that is created is allocated a different memory pointer and so comparing objects in ways similar to the above does not detect the objects as being of the same value because they have different reference pointers. This also applies in the case of the array containing sub-arrays instead of objects.

This means we need to use a bit more array manipulation logic to identify the objects with the same values.

There are a few different use cases that are going to be the most likely you'll come across:

\- A duplicate object is one where a single object property value must be unique

```typescript
const duplicateObjs = [
  {
    id: 1,
    name: 'James'
  },
  {
    id: 2,
    name: 'Nick'
  },
  {
    id: 2,
    name: 'Bob'
  }
];

const uniqueObjs = [...new Set(duplicateObjs.map(obj => obj.id))]
  .map(id => duplicateObjs.find(obj => obj.id === id));
/* console.log(uniqueObjs) => [
  {
    id: 1,
    name: 'James'
  },
  {
    id: 2,
    name: 'Nick'
  }
]
  */
```

What we are doing here is turning the original array into an array of primitive types by using the .map() function to retrieve only the id property values. By putting this inside a new Set() object, we achieve the same functionality as the first example to create unique values only. The second call of the .map() function then returns the entire object from the original array by finding the element with that id value. The .find() function retruns the **first** entity in the array that matches the search criteria so we will get the object with the name 'Nick' in this case.

\- A duplicate object is one where multiple object property values cannot be equal across objects

```typescript
const duplicateObjs = [
  {
    id: 1,
    name: 'James',
    age: 19
  },
  {
    id: 2,
    name: 'Nick',
    age: 26
  },
  {
    id: 2,
    name: 'Bob',
    age: 45
  },
  {
    id: 2,
    name: 'Nick',
    age: 34
  },
  {
    id: 1,
    name: 'James',
    age: 19
  }
];

const isDuplicate = (item, arr) => { 
  return arr.some(el => item.id === el.id && item.name === el.name);
}

const uniqueArray = [];
for(const item of duplicateArr) {
  if(!isDuplicate(item, uniqueArray)) uniqueArray.push(item);
}
/* 
  console.log(uniqueArray) => [
    {
      id: 1,
      name: 'James'
    },
    {
      id: 2,
      name: 'Nick'
    },
    {
      id: 2,
      name: 'Bob'
    }
  ]
*/
```

In this use case, we are running the sub-function isDuplicate to check whether the array contains an object that has both the id and name properties. If this function returns false, then we add the object to the unique array. If the unique array already contains the object, then we continue. 

\- All object property values must not be equal across the objects

```typescript
const duplicateObjs = [
  {
    id: 1,
    name: 'James',
    age: 19
  },
  {
    id: 2,
    name: 'Nick',
    age: 26
  },
  {
    id: 2,
    name: 'Bob',
    age: 45
  },
  {
    id: 2,
    name: 'Nick',
    age: 34
  },
  {
    id: 1,
    name: 'James',
    age: 19
  }
];

const uniqueArray = duplicateObjs.filter((item) => {
  var key = Object.keys(item).map(key => item[key]).join('|');
  if(!this[key]) return this[key] = true;
}, Object.create(null));

/* 
  console.log(uniqueArray) => [
    {
    id: 1,
    name: 'James',
    age: 19
    },
    {
      id: 2,
      name: 'Nick',
      age: 26
    },
    {
      id: 2,
      name: 'Bob',
      age: 45
    },
    {
      id: 2,
      name: 'Nick',
      age: 34
    }
 ]
*/
```

In this use case, we are using the in-built array filter method and then using a new object to evaluate whether the combined list of object keys exists already. The combined list of object properties is set into the key variable by using Object.keys() which returns an array of the key names. By then mapping this to get the value for each key we then join them into a string in the format of value|value ('1|James|19'). This is then the key we add to the new object if it dows not exist. If it doesn't then we return true to the filter function so it includes the original object in the final array.

Arrays are one of the most common data structures you will use in Javascript. They create lists for displaying to users that can be simple or contain complex data objects. Creating lists that have clean information in them is vital for a good user experience. One way to do this is to make sure you are not displaying the same information multiple times.

Remove Duplicate Entries From a Javascript Array

![Firebase-Logo](/assets/firebase-1024x293.jpg "Firebase Logo")

[Firebase](https://firebase.google.com/) provides a wide variety of modules that are highly useful for mobile & web apps, particularly Authentication, Firestore DocumentDB, Storage, Analytics, and App Performance Monitoring.

Here, we will integrate Firebase with an Ionic Capacitor app built with Angular.

There are a couple of [Capacitor Community plugins](https://github.com/capacitor-community) available that provide a native wrapper around the Firebase libraries, but I have found that they are unnecessary as the web Firebase set up does all of the same and more just as quickly.

Let's start by spinning up a new Ionic app. Open a new command prompt and run the following:

![New app](https://cdn.hashnode.com/res/hashnode/image/upload/v1607766648768/EaJuxY8mD.png?auto=compress,format&format=webp "Create New App")

This creates a new ionic app called firebase-ionic-app that is preconfigured using a blank Ionic template, Angular as the underlying framework and automatically adds the Capacitor requirements so we do not need to do this manually later.

Once that has finished setting up and installing all the required packages let's also install firebase by cd-ing into the newly created directory (firebase-ionic-app in this case) and running npm i firebase.

Now we can open the directory in your IDE of choice. You'll also need to have [set up a web project in Firebase](https://firebase.google.com/docs/web/setup) to connect to (At this stage there is no need to set up Android or iOS projects).

Starting in the environment.ts file in src/environments/environment.ts, let's add a firebaseConfig property to the environment object:

```javascript
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey:
    authDomain:
    databaseURL:
    projectId:
    storageBucket:
    messagingSenderId:
    appId:
    measurementId: 
  }
};
```

All these values can be retrieved from the Firebase project created previously. Next, we're going to move on to the src/app/app.module.ts file and initially, we're going to add three lines of code right above the @NgModule declaration:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";

firebase.initializeApp(environment.firebaseConfig);
```

* make sure the firebase import is from "firebase/app" and not just "firebase" as this will cause errors.

What this does is bring in the firebaseConfig object we just created in the environment file, imports the firebase npm module and initialises our firebase app using those details.

Many examples have this setup running in the src/app/app.component.ts file, but this can result in multiple attempts to initialise the firebase app when it has already been initialised which, in turn, leads to a number of follow-on issues.

The app.module.ts file is where we also import other Firebase modules into our app, *say*, [analytics](https://firebase.google.com/docs/analytics) and [performance monitoring](https://firebase.google.com/docs/perf-mon) so our app.module.ts might end up like this:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";
import "firebase/analytics";
import "firebase/performance";
firebase.initializeApp(environment.firebaseConfig);
firebase.analytics();
const perf = firebase.performance();
```

At this point, we can run "ionic serve" in our command prompt to start the Ionic app in our browser. If the firebaseConfig object is set up with the correct variable values, your app should run with no errors in the browser or the browser developer console.

From here, any component class that needs to use any of the Firebase functionality can just import the main Firebase package and any additional modules.

For example, to use the authentication module in a component:

```javascript
import firebase from "firebase/app";
import "firebase/auth";
```

From here, we can now flesh out all the Firebase functionality we need in our Ionic app until we're ready to add the Android and iOS platforms.

A quick how-to guide for adding Firebase into an Ionic application using Angular