> For the complete documentation index, see [llms.txt](https://docs.spurtcommerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.spurtcommerce.com/frontend-deployment-setup/store-front-setup/angular-store-front.md).

# Angular Store Front

#### **For Initial Angular Storefront Setup and to run the application, refer to** [**Angular Storefront Setup**](/getting-started/development-and-setup/store-front-setup/angular-store-front.md#initial-setups) **under** [**Development and Setup**](/getting-started/development-and-setup.md)**.** 

### **Build your application  in Development Mode**

While building the application in development mode → src→ environments → environment.dev.ts,

```
export const environment = {
production: false, 
storeUrl: '<Your API Base url>', // eg: 'http:/localhost:8000/backend/api/'
imageUrl:'<Your API url for image resize>', // eg: 'http:/localhost:8000/backend/api/media/image-resize' 
};
```

To build your application in development mode, run the following command:

```
ng build --configuration development
```

### For SSR in Development (Server Side Rendering)

**Step-1** > Build and run the project with the below mentioned command

> ```
> npm run dev-build:ssr && npm run serve:ssr
> ```

**Step-2** > Open the browser and navigate to

> ```
> http://localhost:4000
> ```

Step-3> For configuring the SSR, check the existence of this line in your [Apache Server](/api-deployment-and-setup/deployment-from-source-code.md). If not, then add this line in your server.&#x20;

```
ProxyRequests off
<Proxy *> 
            Order deny,allow 
      Allow from all
</Proxy>

</Location>
ProxyPass http://127.0.0.1:4000/ 
ProxyPassReverse http://127.0.0.1:4000/
</Location>
```

### **Build your application  in QA Mode**&#x20;

While building the application in QA mode → src→ environments → environment.qa.ts

```
export const environment = {
production: true, 
storeUrl: '<Your API Base url>', // eg: 'http:/localhost:8000/backend/api/'
imageUrl:'<Your API url for image resize>', // eg: 'http:/localhost:8000/backend/api/media/image-resize' 
};
```

To build your application in QA mode, run the following command:

```
ng build --configuration qa
```

### For SSR  in QA (Server Side Rendering)

**Step-1** > Build and run the project with the below mentioned command

> ```
> npm run qa-build:ssr && npm run serve:ssr
> ```

**Step-2** > Open the browser and navigate to

> ```
> http://localhost:4000
> ```

Step-3> For configuring the SSR, check the existence of this line in your [Apache server](/api-deployment-and-setup/deployment-from-source-code.md). If not, then add this line in your server.&#x20;

```
ProxyRequests off
<Proxy *> 
            Order deny,allow 
     Allow from all
</Proxy>

</Location>
ProxyPass http://127.0.0.1:4000/ 
ProxyPassReverse http://127.0.0.1:4000/
</Location>
```

### **Build your application  in Production Mode**&#x20;

\
While building the application in production mode → src→ environments → environment.prod.ts,

```
export const environment = { 
production: true, 
storeUrl: '<Your API base url>', // eg: 'http:/localhost:8000/backend/api/' 
imageUrl: '<Your API url for image resize>', // eg: 'http:/localhost:8000/backend/api/media/image-resize'
 };
```

To build your application in production mode, run the following command:

```
ng build – prod
```

### For SSR  in Production (Server Side Rendering)

**Step-1** > Build and run the project with the below mentioned command

> ```
> npm run build:ssr && npm run serve:ssr
> ```

**Step-2** > Open the browser and navigate to

> ```
> http://localhost:4000
> ```

&#x20;Step-3> For configuring the SSR, check the existence of this line in your [Apache server](/api-deployment-and-setup/deployment-from-source-code.md). If not, then add this line in your server.&#x20;

```
ProxyRequests off
<Proxy *> 
      Order deny,allow 
      Allow from all
</Proxy>

</Location>
ProxyPass http://127.0.0.1:4000/ 
ProxyPassReverse http://127.0.0.1:4000/
</Location>




```