Challenge Overview:

In this challenge, you will learn how to serve the production build of your Angular project locally, without relying on a development server. You’ll learn how to generate the production build of your Angular project and serve the build files using a local server (e.g., using http-server or any similar tool).

By the end of this challenge, you will be able to:

Generate the production build of an Angular project.
Serve the build files locally without using Angular’s ng serve.
Understand the importance of serving the build files locally for testing and deployment purposes.

Objective:

Generate a production build of the Angular application.
Serve the production build files locally using a simple HTTP server.
Test the application by serving the build files without Angular’s development server.

Step 1: Generate the Production Build of Your Angular Application

Open Your Angular Project:

If you don’t have an Angular project, you can create one by running the following:
```
 ng new angular-local-build
 cd angular-local-build
```
Build the Angular Application for Production:

To generate the production build of your application, run the following command:
```
 ng build --prod
```
- This will generate the production-ready build files in the dist/ directory (located under the project root).
- The --prod flag ensures that the application is optimized for production, including minification, tree-shaking, and other optimizations.

The output build files will be located in:

    dist/your-project-name/

Verify the Build:

Navigate to the dist/your-project-name folder and ensure the following files are generated:
- index.html
- main.js, runtime.js, and other JavaScript files
- CSS files (e.g., styles.css)
- Assets (e.g., images, fonts, etc.)

Step 2: Install a Local Server to Serve the Build Files

To serve the build files locally, you can use a simple HTTP server. In this case, we’ll use the http-server package, which is a popular, easy-to-use Node.js server.

Install http-server Globally:

First, install the http-server package globally on your system:
```
 npm install -g http-server
```
This will install http-server globally, allowing you to use it in any directory.
Navigate to the Build Directory:

After building your Angular app, navigate to the dist/ folder that contains the build files:
```
 cd dist/your-project-name
```
Serve the Build Files:

Run http-server to serve the files locally:
```
 http-server
```
This will start a server on http://localhost:8080 by default.

Step 3: Test the Application Locally

Open the Application in a Browser:

Open your browser and go to http://localhost:8080 to test the production version of your Angular app served locally.
- You should see your Angular app running as if it was deployed on a live server, but this time, it’s being served locally.
- The app will be loaded from the static files (i.e., the index.html, JavaScript, and CSS files) generated by the ng build --prod command.
Inspect the App Behavior:
- Test the functionality of the app to ensure everything works as expected.
- Check the network requests in the browser developer tools to make sure the app is making requests correctly and no issues are occurring with resources.

Step 4: Additional Testing and Considerations

Verify Cache-Control Headers:

In a real-world deployment scenario, the files generated in the dist/ folder would be served with proper cache headers to improve performance. For local testing, the http-server may not automatically set the proper headers. If you need to test caching behavior, you can set custom headers using the -c option with http-server:
```
 http-server -c-1
```
This disables caching, ensuring that files are always reloaded when you refresh the page.
Test in Different Browsers:

Test the app in different browsers (e.g., Chrome, Firefox, Edge) to ensure cross-browser compatibility and ensure no browser-specific issues exist.
Handle 404s (Not Found):

If your Angular app uses routing and you have nested routes, ensure that your server is configured to handle 404 errors and fallback to index.html (common in single-page applications). You can handle this with the -P flag in http-server:
```
 http-server -P http://localhost:8080
```

Bonus Features (Optional):

Use a Custom Domain:

To simulate a real-world scenario, you can map localhost to a custom domain (e.g., myapp.local) using your system's hosts file. This is useful when testing domain-specific features, like cookies or authentication.
Deploy to a Local or Remote Server:

After testing the production build locally, deploy the build to a staging or production server (e.g., using FTP, a cloud service like AWS, or any hosting provider).
Check for Build Optimizations:

Open the build files and verify that Angular’s build optimizations (like minification, tree-shaking, and AOT compilation) are applied. You can use source maps to debug the minified code if necessary.

Conclusion

By completing this challenge, you'll gain the following skills:

Generating the production build of an Angular application.
Serving production files locally using a simple HTTP server (e.g., http-server).
Testing and verifying that the Angular app is working as expected without the Angular CLI development server.

This knowledge is critical for understanding how Angular applications are deployed to production environments and how to serve static files locally for testing.

Requirements to Submit:

A working production build of an Angular application.
Clear instructions on how to run the server and test the application locally.
(Optional) Any additional features or configurations added for testing the build.

Good luck, and happy coding! 🚀

Day 29 Challenge: Serve Build Files Locally in an Angular Project