Hi, I am practicing with angular creating a web together with PHP as Back in separate environments (servers), PHP in Apache offers an API, and for now angular in my PC that reads that API (with ng server ). up there well
But now I want to take angular (front) to a Server let's say it will be the production . Angular when making the build, it generates some js files, where they go, if I want to have it separated from PHP (the API).
On another Apache, on a NodeJS server ...?
I explain to you what is the process for those who work with Angular and want to show their compilation in Apache
Development environment:
1 . Frontend Angular: When executing ng serve , an http server with port 4200 is shown to see our app.
2 . You have an apache server where your backend is located using php
At that time you have two servers for a frontend and backend
Production environment show your frontend app in apache
1 . You execute ng buil -prod and a folder dist will be created in your application, which inside is as follows:
2 . The next is to upload those files to an apache server, I indicate the steps:
Implementation of the compilation of prod in Apache 2
This can be achieved by adding a .htaccess (in the same directory where index.html) with the following contents.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
This code snippet makes use of the mod_rewrite Apache module, so make sure you have it enabled. In Linux this can be done in the following way (probably all commands must be executed as sudo):
a2enmod rewrite
Restart the apache service after that
service apache2 restart
Also, for the rewrite module to work, the apache configuration should have been AllowOverride all enabled for the directory where the Angular application is located. This is done as follows:
Open the virtual host file, and add the following code AllowOverride All
This is an example of how your virtual host should look: Domain: produccionAngular.me
<VirtualHost *:80>
ServerName produccionAngular.me
DocumentRoot "C:\xampp7.1\htdocs\appAngular"
SetEnv APPLICATION_ENV "development"
ErrorLog "logs/dash-error.log"
CustomLog "logs/dash-access.log" common
<Directory "C:\xampp7.1\htdocs\appAngular">
DirectoryIndex index.html
AllowOverride All
Order allow,deny
Allow from all
<IfModule mod_authz_core.c>
Require all granted
</IfModule>
</Directory>
</VirtualHost>
I give you a reference: link
To complement what Jan Pierre Sanchez says, the NodeJs server is only necessary if you want to implement a Server Service Rendering or SSR and a reverse proxy would be needed.