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




```


---

# 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://docs.spurtcommerce.com/frontend-deployment-setup/store-front-setup/angular-store-front.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.