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 Angular Storefront Setup under Development and Setup.

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. If not, then add this line in your server.

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

Step-3> For configuring the SSR, check the existence of this line in your Apache server. If not, then add this line in your server.

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

Step-3> For configuring the SSR, check the existence of this line in your Apache server. If not, then add this line in your server.

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>