{"flag":true,"single":true,"pageTitle":"Build the angular project and run on server namecheap, hostinger etc | Deploy angular","post":{"id":103,"user_id":"1","slug":"build-the-angular-project-and-run-on-server-namecheap-hostinger-etc-dbuq","title":"Build the angular project and run on server namecheap, hostinger etc | Deploy angular","body":"<p><strong>Angular <\/strong>is a popular front-end web development framework that helps developers build scalable and maintainable applications. This article will guide you through the process of building and deploying an Angular project step by step.<\/p>\r\n<p><strong>Prerequisites<\/strong><\/p>\r\n<p>Before you start, ensure that you have the following tools installed on your system:<\/p>\r\n<ul>\r\n<li>Node.js and npm (Node Package Manager)<\/li>\r\n<li>Angular CLI (Command Line Interface)<\/li>\r\n<\/ul>\r\n<p><strong>Step 1: <\/strong>Set all paths to root in the components folder<\/p>\r\n<p>To avoid potential issues with the deployment, make sure all paths are set to root in your components folder. Update the href attribute for any links, and ensure that the assets folder path is correctly set.<\/p>\r\n<p><strong>Step 2:<\/strong> Build the Angular project<\/p>\r\n<p>Navigate to your project's root directory in the terminal or command prompt and execute the following command:<\/p>\r\n<pre class=\"language-markup\"><code>ng build --base-href \"https:\/\/newsite.com\"<\/code><\/pre>\r\n<p>Replace \"https:\/\/newsite.com\" with the base URL of your website. This command will generate a \"dist\" folder containing your compiled Angular application.<\/p>\r\n<p><strong>Step 3<\/strong>: Add an .htaccess file for URL rewriting<\/p>\r\n<p>Create an .htaccess file in your 'dist' folder and add the following configuration:<\/p>\r\n<pre class=\"language-markup\"><code>RewriteEngine On\r\n\r\n# Redirect requests to the index.html file\r\nRewriteRule ^$ index.html [L]\r\nRewriteRule ^index.html$ index.html [L]\r\n\r\n# Redirect non-existing files and directories to index.html\r\nRewriteCond %{REQUEST_FILENAME} !-f\r\nRewriteCond %{REQUEST_FILENAME} !-d\r\nRewriteRule ^(.*)$ index.html [L]\r\n<\/code><\/pre>\r\n<p>This configuration ensures that all requests are redirected to the 'index.html' file, allowing Angular's routing to handle URL changes.<\/p>\r\n<p><strong>Step 4: <\/strong>Upload the project to the server<\/p>\r\n<p>Finally, upload the contents of the 'dist' folder to your web server. Make sure to configure your server to serve the 'index.html' file as the default document for your site.<\/p>\r\n<p><strong>Conclusion<\/strong><\/p>\r\n<p>Building and deploying an Angular project involves setting the appropriate paths, building the project with the Angular CLI, updating the base URL, adding URL rewriting with an .htaccess file, and uploading the project to your web server. By following these steps, you'll be able to deploy your Angular application successfully.<\/p>","category_id":"13","is_private":"0","created_at":"2023-04-04T22:27:33.000000Z","updated_at":"2023-04-05T23:18:29.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Angular is a popular front-end web development framework that helps developers build scalable and maintainable applications. This article wi - Build the angular project and run on server namecheap, hostinger etc | Deploy angular (Updated: April 5, 2023) - Read more about Build the angular project and run on server namecheap, hostinger etc | Deploy angular at my programming site [SITE]","categories":[]}