# Ionic Baba Commerce

**Required Setup** 

First, this link will help you install and build your first Example Ionic app.\
[https://ionicframework.com/docs/intro/cli ](https://ionicframework.com/docs/intro/cli)\
**Navigate to the project folder after downloading and extracting the main files from codecanyon.**

```
cd BabaCommerce
```

> **Installing Node Modules**

Open terminal and go to project folder and run following command

```
npm install
```

**Building Web Build In Production**

Copying Web Code

```
npx cap copy
```

Add Web Build

```
ionic build --prod
```

**iOS Setup** 

**Running Simulator**

Run following command if you have installed node modules from previous command.<br>

Add IOS Platform<br>

```
npx cap add ios
```

For Opening the iOS Project<br>

To open the project in Xcode, run:  &#x20;

```
 npx cap open ios
```

**Android Setup**

Add Andoird Platform\
&#x20; &#x20;

```
 npx cap add android
```

For Opening the Android Project<br>

To open the project in Android Studio, run:   <br>

```
 npx cap open android
```

### Configuration Setup

**Required Setup**

**App Config**

Open the project folder and go to the **BabaCommerce\src\app\providers\config.ts file**&#x20;

* \* change color of the theme&#x20;
* \* change the Home Style&#x20;
* \* change the Lig**ht**/Dark Mode Theme&#x20;
* \* change Language LTR/RTL&#x20;

you can customize the app with this config file

### You can Change the SplashScreen and app Icon

**For Android**

Customize your launch screen app icon by creating a splashscreen.png -file , ic\_launcher.png and ic\_launcher\_round.png and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

* \* drawable-port-hdpi&#x20;
* \* drawable-port-mdpi&#x20;
* \* drawable-port-xhdpi&#x20;
* \* drawable-port-xxhdpi&#x20;
* \* drawable-port-xxxhdpi&#x20;

**For Ios**

Customize your splash screen

You can check this documentation for App icon and splash screen

<https://www.joshmorony.com/deploying-capacitor-applications-to-ios-development-distribution/>

### LTR and RTL labels

Go into **BabaCommerce\src\app\providers\gLJson.ts** this file contains all English and Arabic labels. You can easily add new languages and edit these labels.

**Default RTL setup**

you can start the app in RTL mode for language like arabic

go into **BabaCommerce\src\app\providers\config.ts file** and set rtl value in initialstate value

localStorage.direction = "ltr"; // By Default (LTR)

localStorage.direction = "rtr"; // For RTL