Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: integrate webserver configuration #36553

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions aio/content/guide/i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -774,8 +774,83 @@ The HTML `base` tag with the `href` attribute specifies the base URI, or URL, fo

You can also use the CLI `--baseHref` option with [`ng build`](cli/build "CLI reference for ng build") to declare the base `href` at compile time.

Configuring servers for hosting multiple locales is outside the scope of this guide.
For details on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide").
### Configuring servers

Typical deployment of multiple languages serve each language from a different subdirectory.
Users are redirected to the preferred language defined in the browser using the
`Accept-Language` HTTP header. If the user has not defined a preferred language,
or if the preferred language is not available, then the server falls back to the default language.
Users can change the language by navigating to other subdirectories, which often occurs using a
menu implemented in the application.

For more information on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide").

#### Nginx

The following is an example of an Nginx configuration.

```
http {

# Browser preferred language detection (does NOT require AcceptLanguageModule)
map $http_accept_language $accept_language {
~*^de de;
~*^fr fr;
~*^en en;
}
# ...
}

server {
listen 80;
server_name localhost;
root /www/data;

# Fallback to default language if no preference defined by browser
if ($accept_language ~ "^$") {
set $accept_language "fr";
}

# Redirect "/" to Angular app in browser's preferred language
rewrite ^/$ /$accept_language permanent;

# Everything under the Angular app is always redirected to Angular in the correct language
location ~ ^/(fr|de|en) {
try_files $uri /$1/index.html?$args;
}
# ...
}
```

#### Apache

The following is an example of an Apache configuration.

```
<VirtualHost *:80>
ServerName localhost
DocumentRoot /www/data
<Directory "/www/data">
RewriteEngine on
RewriteBase /
RewriteRule ^../index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (..) $1/index.html [L]

RewriteCond %{HTTP:Accept-Language} ^de [NC]
RewriteRule ^$ /de/ [R]

RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^$ /en/ [R]

RewriteCond %{HTTP:Accept-Language} !^en [NC]
RewriteCond %{HTTP:Accept-Language} !^de [NC]
RewriteRule ^$ /fr/ [R]
</Directory>
</VirtualHost>
```

{@a app-pre-translation}

Expand Down