I'm trying to deploy my AngularJS app generated with Yoeman on Nginx, this is my nginx configuration :
server {
server_name 0.0.0.0;
listen 8080;
root /home/gestAngular/app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
but when i start nginx, my app dosent find the dependencies.
my directory gestAngular look like this :
-gestAngular
---App
---bower_components
---node_modules
---test
---dist
its generated with yoeman angular generator .
Any idea how can i make nginx recognize the location of my dependencies (bower-components)?
It doesn't find the dependencies because you have set the root folder to the folder app, which won't get access to the bower components.
Instead you should "build" your app using gulp or grunt to the dist folder and deploy that folder to your server:
root /home/gestAngular/dist;
you have this 'dist' folder which was generated by command 'grunt build' or 'grunt' this folder you have to deploy directly you don't have to deploy other files if you have generated your project using yeoman you will get a file name index.html. This file you have to configure in nginx.
server {
server_name 0.0.0.0;
listen 8080;
location / {
root YourDistFolderLocation/dist;
index index.html index.htm;
}
}
by doing this your frontend should be up & running let me know if any problem comes. I hope it helps.
Related
I am currently learning to deploy applications made with NextJs to VPS. I have been successful, running some REST APIs on the Nginx server, I am not using the NextJs api feature, this is separate using Express. This is executed using PM2.
But I am confused, how do I serve NextJs "out" the results folder "next build && next export", this is a dashboard page that fetches data on the client side.
Do I have to treat the same with the REST API using PM2 or a different treatment, can you please provide an example configuration file of nginx for this.
I have tried googling but there is no exact answer about this.
Thanks in advance, I appreciate any answer.
server {
server_name your-website.com;
location / {
root /app; # name of the folder where you put content of out directory, try files will be relative to this path
try_files $uri $uri.html $uri/ =404; # try different strategies to find matching file in the folder with build, otherwise throw 404 error
}
error_page 404 /404.html; # if 404, serve this file
}
I need to serve a react app on a subpath domain http://domain.dev/myreactapp
And I can't find a configuration to serve the app using nginx.
I'm using the nginx docker container.
I already tried a lot of stuff but this is my conf right now.
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
}
The the big nginx instance points http://mydomain.dev/myreactapp to another server that will serve static files with nginx on a docker container (the nginx:1.16.0-alpine container)
My react app will only be served by that url, the top domain is pointing to another server.
But I can't make the app respond to the subpath.
If I ran the second docker image on my machine, it only respond to the top level.
I don't know what I need to set it up on the second nginx to serve the app on the http://mydomain.dev/myreactapp subpath.
Just started with using React. I have an app created with create-react-app which should be running on a sub-directory while making API calls to a different path.
React App:
location on server: /var/www/myapp/build
endpoint: https://foo.example.com/analytics
Data API endpoint: https://foo.example.com/api/data
Nginx setup
location /analytics {
root /var/www/myapp/build;
try_files $uri /index.html;
}
When setting "homepage":"https://foo.example.com/analytics" in the client's package.json, all the resource paths seem to be correct (i.e. https://foo.example.com/analytics/static/...), but when checking networking no request to .../api/data shows up in my browser's networking inspector and the app doesn't properly spawn.
Using absolute paths in the App's API call (fetch('https://foo.example.com/api/data') instead of fetch('/api/data')) doesn't seem to help, either.
When instead I set "homepage":"." in package.json and also change the Nginx config to serve the react build directory on server root, the app works.
server {
root /var/www/myapp/build;
}
However, in this case, the app is also available under https://foo.example.com, which is something I don't want.
I strongly suspect this has to do with routing, but couldn't figure out how to fix it. So any help would be much appreciated!
--- Edit / Solution ---
I doubt it's the most straight forward solution, but the following setup works for me:
React App
In package.json, set "homepage":"./analytics" before running npm run build
Nginx config:
location = /analytics {
root /var/www/myapp/build;
try_files /index.html =404;
}
location ~ ^/analytics(.*) {
root /var/www/myapp/build;
try_files $1 $1/ /index.html =404;
}
My understanding is that the initial setup using try_files $uri was looking for files in the root directory /var/www/myapp/build for the full uri rather than only the path that follows /analytics. E.g. when requesting ../analytics/css/styles.css it would check if a file (or directory) is available under /var/www/mayapp/build/analytics/css/styles.css which doesn't exist, so it kept serving the index.html as fallback. Hence the regex workaround.
Feedback to improve this solution still very welcome, though.
I was struggling with the same problem. Finally I was able to solve it using official documentation and a combination of answers:
Assumptions:
Your React App is based on create-react-app package (you are using react-router-dom).
You are using Nginx and the root path is being used by another service (or even another React/Gatsby App which is my case).
You want to deploy the React App on a subdirectory and be able to serve all statics of your React App from that subdirectory.
React App Changes:
Based on official documentation.
Update your BrowserRouter by adding a basename. Example: <BrowserRouter history={history} basename="/webapp">.
Specify a homepage on your package.json. Example: "homepage": "/webapp".
If you are referencing a static file by its relative path, you should add the subdirectory to that reference. Example: src="/static/logo/logo.png" becomes src="/webapp/static/logo/logo.png".
Nginx Changes:
location ^~ /webapp {
alias /var/www/myapp/build;
try_files $uri $uri/ /webapp/index.html;
}
Here is an example of nginx location configuration:
location ^~ /analytics {
alias /var/www/myapp/build;
subs_filter href="/ href="http://foo.example.com/analytics;
subs_filter src="/ src="http://foo.example.com/analytics;
}
The location is set to ^~ /analytics , meaning that the rules created in the location braces will become effective when somebody visits http://foo.example.com/analytics
The alias is set to the static build folder of create-react-app site /var/www/myapp/build. That’ll be served when the visitor hits your subdirectory url foo.example.com/analytics
Next, the two subs_filter lines replace any reference to href and src urls that start with the React app’s home directory / with the new complete URL. That will ensure all your CSS and JS files are located and served correctly by NGINX.
The final thing, in the case of Create-React-App is that any references to createBrowserHistory in your react router need to be replaced by createHashHistory, as Browser History won’t work with the above NGINX configuration.
My website is called derekdawsonspersonalwebsite.com and I wanted to serve a react app I made at derekdawsonspersonalwebsite.com/metronome/
I got this working by doing the following:
Added "homepage": "/metronome", to the package.json file
If you are using react router, add <BrowserRouter basename="/your_subdirectory">, in my case:
<BrowserRouter basename="/metronome">
<div>
<nav>
<Link to="/"></Link>
</nav>
<Switch>
<Route exact path="/" component={Metronome} />
</Switch>
</div>
</BrowserRouter>
yarn run build
I uploaded the contents of the build directory to this location on my server /var/www/personalwebsite.com/metronome
This is what my server block /etc/nginx/sites-available/personalwebsite.com looks like
server {
listen 443 ssl;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
ssl_certificate /home/derek/ssl/derekdawsonspersonalwebsite.com_chain.crt;
ssl_certificate_key /home/derek/ssl/derekdawsonspersonalwebsite.com_tld.key;
location / {
root /var/www/personalwebsite.com;
index index.html;
}
location /metronome {
root /var/www/personalwebsite.com;
index index.html;
}
}
server {
listen 80 default_server;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
return 301 https://$host$request_uri;
}
I'm trying to get an nginx server for my react application. I have the following directory structure.
/node_modules
- react
- react-dom
...
/dist
- index.html
- bundle.js
- styles.css
My current nginx configuration file looks like this:
server {
listen 80;
server_name localhost;
location /node_modules {
root /var/www/app;
}
location / {
root /var/www/app/dist;
autoindex on;
try_files $uri /index.html =404;
}
}
The actual problem that I'm having is that try_files is not behaving as I think it should. Every file is being load correctly except for bundle.js and styles.css. When this two files are requested nginx is serving index.html instead of them. Based on my configuration, try_files is not finding bundle.js in /var/www/app/dist/bundle.js (I verified the file is in the correct place) and then using index.html as the fallback.
Any ideas on why this could be happening ?
I am trying to configure CakePHP 3 on OSX running nginx. The default page reports that everything is working except URL rewriting. However, I have URL rewriting working for page URLs (just followed the instructions for nginx setup). The only thing that's not working is loading static assets from webroot. I've been digging through a ton of similar stackoverflow questions and none of the responses seem to work.
vhost file:
server {
listen 80;
server_name albums.dev;
root /Users/username/Sites/albums;
access_log /Library/Logs/default.access.log main;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /usr/local/etc/nginx/conf.d/php-fpm;
}
}
Again: The entire CakePHP application seems to be working correctly, except the static assets in /webroot/ are coming up as 404.
change the root .. you must point to webroot of your project
if you want i can give my conf to you