I am building the angular app and want to route the URL to http://localhost/sample/AngularApp/. but don't want to give the entire URL in the browser. I will give the only localhost. In angular, while building the dist we are using the command ng build --base-href=/sample/AngularApp/ and created the folder structure /sample/AngularApp in Nginx mentioned path /usr/share/nginx/html.so while accessing the application still, we are giving the entire path in browser. so, How could I resolve this issue and how to configure that path in nginx.conf file to autoroute the URL?
I would go with standard configuration:
server {
listen 80;
listen [::]:80;
root /var/www/html/YourAngularApp/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
This gives opportunity to serve other files (if found) or fall back to index.html located at the project's root.
Now, if you have everything in place you should build your project with
ng build --base-href=/
--base-href=/ can be omitted as it defaults to /. Please have a look at Angular docs about using --base-href and --deploy-url
Related
I have a compiled Angular application located on my local disk.
Trying to run it on nginx server.
Added the following configuration:
server{
listen 8080;
.......
location /myapp/ {
root C:/myapp/;
try_files $uri$args $uri$args/ =404;
}
index.html file in project root contains references to js files, located in myapp/assets/js folder:
<script src="/assets/js/myscript.js"></script>
But when I run it on server, I get index.html file, it opens, it tries to locate file in http://127.0.0.1:8080/assets/js/polyfill.min.js, avoiding root "myapp", which leads to 404 error.
Adding additional location "location /assets/" doesn't solve the problem.
Could anyone help me with this?
Thanks.
I have deployed (using Kubernetes/helm charts) React app to http://localhost:30111/ using embedded NGINX. This single page application requires some NGINX rewrite rules for deep linking of static sources. There are following NGINX rules:
server {
server_name _;
gzip on;
gzip_static on;
location / {
try_files $uri /index.html;
}
}
Everything works fine and application is listening on http://localhost:30111/ as expected.
What I need to do: I need to use new context path for this application e.g. http://localhost:30111/myapp instead of root context path http://localhost:30111/.
How should I write proxy_pass/rewrite rules in NGINX to work on new context path?
Even though its late, i will provide my answer which may help someone later.
As a first step move all the files in the build folder to a sub directory which is same name of context path.
build/myapp/...All static files will be placed here.
Add your context path in package.json file
"homepage": "/myapp" -- this will help set process.env.PUBLIC_URL to /myapp
Add Basename in the BrowserRouter
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Suspense fallback={<Loader />}>
// ... app routes...
</Suspense>
</BrowserRouter>
Change in your nginx configuration to use files from your sub directory
location / {
return 301 /myapp;
}
location ~ ^/myapp {
try_files $uri /myapp/index.html;
You are done. Deploy your application and see Ui redirects directly to your context path and serving the files.
I'm having issues serving pictures with nginx. I originally started with a Django project and I wanted to serve the user uploaded media files via nginx but I wasn't able to get it working no matter what I tried.
So, I've make a second temporary droplet/server and am trying a bare bones setup with no Django project, just Nginx, to see if I can get it to simply serve an index and a couple pictures in a folder called 'media'. Here is the server block:
server {
listen 80;
listen [::]:80;
root /var/www/example.com/html;
index index.html;
server_name 159.89.141.121;
location / {
try_files $uri $uri/ =404;
}
location /media/ {
root /var/www/example.com/media;
}
}
Now, the index.html is served fine but if I try to go to 159.89.141.121/media/testpic.jpg it still doesn't work and returns a 404 error. I'm at a complete loss here, I've tried using alias instead of root, I've tried changing the folder structure and setting all permissions to 777 and changing folder and file ownership, permissions shouldn't be a problem because the index.html works fine with the same permissions; I just cant seem to figure out what I'm doing wrong. The picture is in the folder but nothing I try allows me to access it via the uri. Are there any obvious problems with my server block?
Well I decided to read the documentation and realized that the location block adds to the root directory specified..
So the pathing of
`location /media/ {
root /var/www/example.com/media;
}`
would end up routing example.com/media/testpic.jpg to /var/www/example.com/media/media/testpic.jpg
I've changed the location block to look like this
location /images/ {
root /var/www/example.com/media;
}
and it will now route example.com/images/testpic.jpg to /var/www/example.com/media/images/testpic.jpg
I'm not sure why it didn't work when I tried the alias directive, though...
I've an vue.js (Quasar framework with webpack) app and I use vue-router. I use nginx (with laravel forge) on the server side. In the local (quasar dev or npm run dev), everything is alright. I hadn't been able to refresh pages for the address which is like /settings and I solve it with add
location / {
try_files $uri $uri/ /index.html?$query_string;
}
lines to nginx configuration file. After that I could refresh the /settings page on the server. But now, I can't refresh a page if it has one more dimension.
/survey/1
I tried to add these lines to nginx configuration file
location /survey/ {
alias /;
try_files $uri $uri/ /index.html?$query_string;
}
but it doesn't work.
When I look at the errors, I see js addresses are wrong.
http://example.com/survey/js/manifest.js'
It should be
http://example.com/js/manifest.js'
I researched a bit but couldn't find a solution.
I found the problem. It's in webpack build configuration, quasar framework. I just need to modify the Project/config/index.js file's build part. Under the build section, publicPath should be updated from
publicPath: ""
to
publicPath: "/"
And it's the same for the dev section too. When update dev section's publicPath the problem has been fixed.
I just needed to put "/" to publicPath.
I have a website which is an app containing other apps.
In the main app, I'll load the other apps with iframes.
The main app is served at the domain root: http://example.com
The other apps are served under the /apps path:
http://example.com/apps/app-a
http://example.com/apps/app-b
Also the apps are developed in Polymer so there is client side navigation. I make sure the /apps path is not used on the client side to hit the NGINX server correctly but it also means that for url such as http://example.com/view1 it should redirect to the index.html of the main app. And for url like http://example.com/apps/app-b/view1 it should redirect to the index.html of app-b.
I'm trying to configure NGINX to serve those static apps.
server {
listen 80;
server_name example.com;
root /var/www/example.com/main-app;
index index.html;
try_files $uri $uri/index.html /index.html;
location ~ /apps/([a-z-]+) {
alias /var/www/example.com/apps/$1;
}
}
With the above config I have the main app working with the correct redirection to the index.html for the /view1 path for example.
But I have a 403 forbidden error for the sub apps.
directory index of "/var/www/example.com/apps/app-b" is forbidden,
client: 127.0.0.1, server: example.com, request: "GET /apps/app-b/
I've tried other configurations with no success (infinite redirection leading to /index.html/index.html/index.html...).
I'm sure about the filesystem permissions all directories are 755 and files are 644.
I don't know why it is trying to do a directory index.
Any help is appreciated.
When using alias with a regular expression location, you need to build the entire path to the file. Currently, you are only capturing the second path element.
Having said that, you do not actually need to use an alias here, as the root directive can be use instead.
location /apps/ {
root /var/www/example.com;
}
See this document for details.