How to deploy a polymer 3.0 build on NGINX (Raspberry Pi) - nginx

How can I configure the Polymer build so I can deploy my app built on Windows to my Raspberry Pi running NGINX (in a sub directory)?
I could not install polymer-cli directly on my Raspberry Pi since the chromedriver (which polymer-cli needs) is only available for 64 bit Linux and the official Raspian OS is currently 32 bit only.
So I installed polymer-cli on my Windows machine, and created my first Polymer app according to https://www.polymer-project.org/3.0/start/toolbox/set-up, I also created the new-view page.
I can now run the app using polymer serve (which shows the app correctly in the browser on the Windows machine) and build using polymer build. Now I want to deploy so I copied the build directory (which contains three built variants, es5-bundled, es6-bundled and esm-bundled) to a sub-directory of the NGINX root, /var/www/html/polymer/build.
Firing up my browser and pointing at http://<raspberrypi-ip>/polymer/build/esm-build I see two errors.
The src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js" and src="src/my-app.js" in index.html gives 404. I could not find how to configure polymer-cli to change these, and still serve a working app in Windows so I manually added polymer/default/ to those two paths in the index.html.
Now I end up with a grey page in my browser, no further error messages...
Moving to my phones browser and entering the same url, http://<raspberrypi-ip>/polymer/esm-build, I actually see my app, together with an Oops you hit a 404. Head back to home link. following that link I get to my app, which seems to be working - but the URL is now http://<raspberrypi-ip>/new-view.
I've also played with the NGINX try_fileswithout luck...
server {
...
location /polymer/default {
try_files $uri /polymer/default/index.html =404;
}
}
EDIT: In Serving Polymer App to a /path not at root I found out that I also need to adjust rootPath in index.html. However I still get the 404 described above if I point my browser at http://<raspberrypi-ip>/polymer/esm-build/index.html...
Also, is there any way to refer to the rootPath in the <script src="">tag I manually edited above?
This is my first encounter with Polymer and NGINX, so any pointers are appreciated.

Related

How to make ASP.NET use a sub directory of a host URL as the root directory?

I created a Blazor project in VS. If I press the Run button, it shows up in the browser and functions normally.
The problem is that the free hosting site only allows a sub-directory of the host URL. That is, something like "https://myid.hostingsite.com/projectname". In the configuration page, it seems that I have to use a command like dotnet test.dll -urls="http://$IP:$PORT", where $IP and $PORT are internal values provided by the system, and some sort of reverse proxy maps it to "https://myid.hostingsite.com/projectname".
If I run the Blazor project on that hosting service, it tries to load the css file from "https://myid.hostingsite.com/css/bootstrap/bootstrap.min.css" when it should be "https://myid.hostingsite.com/projectname/css/bootstrap/bootstrap.min.css".
How can I solve this problem?
The CSS can be fixed in index.html or index.cshtml with
<base href="https://myid.hostingsite.com/projectname/" />
See if the rest still loads.

Favicon not working for app served by nginx that is deployed in Kubernetes

We are having an issue getting our favicon to show up. Little background on the app setup. The application is a React app that is served up by Nginx. We did have to make a change to the default.conf file to add a location block to for an alias with the path to the favicon to get it working in Docker. So, from Docker the favicon now shows up just fine when ran locally, but when deployed to our K8s the favicon no longer shows up. I did test with private mode/incognito to make sure it wasn't a caching issue.
Favicon is located in the root of the app along side the index.html.
I haven't been able to find anything that has really helped with resolving this issue, but I do believe I need to reference either the nginx's conf file or the favicon in the deployment yaml.
Has anyone ever dealt with something similar to this before or have any ideas?
Turns out for this scenario. Since the browser tab was opened by another application, it was the path to that apps favicon I needed. For some reason it was trying to look in that folders directories. Doesn't make a lot of sense why it would to me but it is better to have one source.

Having different image url paths depending on stage

to preface: Im running a vue / spring webapp. My application on localhost runs under
"localhost:8080/application/"
while on DEV and TEST it runs under http://application-dev/ and http://application-test/ - so the /application prefix is missing.
In my sass I have the following image url paths: url("/application/image.png")
And on the DEV and TEST webservers I made redirects from /application to / to have it find the images.
Now I want to remove the "/application" part from my images and still get it to work on localhost.
Is there any way I can have a variable in my sass like "{contextpath}/image.png" and let the Spring webapp fill in the contextpath depending on where its deployed? So if I deploy at localhost the path would be ="/application" and if I deploy on test it would need to be equal to an empty string.
Is this even possible? tyvm

Nginx Static files for Flask Admin Page

I have trouble serving the static files for flask admin page.
admin = Admin(app, name='APPName', template_mode='bootstrap3')
app.config['FLASK_ADMIN_SWATCH'] = 'Slate'
Everything seems to be working on localhost but when I upload the application to the server(ubuntu) the bootstrap template no longer works.
The route to the static files for the Flask admin is
http://127.0.0.1:5000/admin/static/bootstrap/bootstrap3/swatch/Slate/bootstrap.min.css?v=3.3.5 on localhost.
On the server its https://domainname.com/admin/static/bootstrap/bootstrap3/swatch/Slate/bootstrap.min.css?v=3.3.5 but its returning error 404.
Can anyone can point me to the right direction.
I know this probably comes late, but here:
Solution
Change your second line:
admin = Admin(app, name='APPName', template_mode='bootstrap3')
app.config['FLASK_ADMIN_SWATCH'] = 'slate' # This line: 'Slate' to 'slate'
Context
I was having the same issue you did. In my case, my config file contained this:
# Flask Config
FLASK_ADMIN_SWATCH: str = "Superhero"
Worked locally, but not when deployed to an EC2 machine running CentOS, I got a 404.
I was running Windows locally and a Linux-based remote machine. I bet you are as well. Windows is case-insensitive, while Linux is case-sensitive.
Having the FLASK_ADMIN_SWATCH variable set to Slate means the path that arrives at flask is something similar to admin/static/bootstrap/bootstrap4/Slate/bootstrap.min.css?v=4.2.1. This doesn't present an issue for Windows, but it does for Linux.
Swatch themes reside inside flask_admin/static/bootstrap/bootstrapX/swatch/, each of them on a folder of their own, and all of them lowercase (e.g.: cerulean, cosmo, etc.). Your specific theme directory is flask_admin/static/bootstrap/bootstrapX/swatch/slate/.
Windows will try parsing bootstrap/bootstrap4/Slate/bootstrap.min.css?v=4.2.1 and succeed at it, because it doesn't care for the case-ness of Slate, but Linux does, that's why it fails and ends up returning a 404.
# These paths are equivalent for Windows, but not for Linux.
bootstrap/bootstrap4/Slate/bootstrap.min.css?v=4.2.1
bootstrap/bootstrap4/slate/bootstrap.min.css?v=4.2.1

Deploy Vue.js app to Apache server

i need some help. I wrote an SPA using VueJs. I ran "npm run build" so i can test my app on my Xampp server. The build generated a "/dist" folder. I changed the index.html in the dist folder to index.php. I tried serving the dist folder with Xampp but it shows a blank page. Please help. I have uploaded the image showing the errors
https://i.stack.imgur.com/ae7GM.jpg
I had the same issue; a bunch of 404's in my console after running
npm run build. Ceejayoz is correct in suggesting you take a look at your network tab to see where the server is expecting to reach the file.
His suggestion tipped me off that my application did not have a base URL set.
Vue's docs on this.
After setting the path my app was located at, I reran the build process and it came right up.
dist files can only be served via http, you have to deploy it to your hosting server before you can see the output of your vue app

Resources