Angular Store Front

You can use this step-by-step guide for Front End Deployment Setup.

For Initial Angular Storefront Setup and to run the application, refer to under .

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

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

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

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

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

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>

PreviousReact Store Front NextFlutter Store Front

Last updated 5 months ago

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' };

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' };

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' };