so my problem is, that nginx is apparently not loading all the dependecies for angular defined at the beginning of the .html view.
This is an excerpt from the start_game.html
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<!--<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>-->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/../node_modules/angular-material/angular-material.css"/>
<link rel="stylesheet" href="/../app/assets/app.css"/>
<script src="/../node_modules/angular/angular.js"></script>
<script src="/../node_modules/angular-animate/angular-animate.js"></script>
<script src="/../node_modules/angular-aria/angular-aria.js"></script>
<script src="/../node_modules/angular-environment/dist/angular-environment.js"></script>
<script src="/../node_modules/angular-material/angular-material.js"></script>
<script>
angular.module("startGame", ['ngMaterial']);
</script>
<script src="/start_game.js"></script>
`
The nginx.conf file looks like this
`server {
# Used to set address and/or port for IP.
listen 80;
server_name localhost;
include /etc/nginx/mime.types;
location /console {
proxy_pass http://jatos-backend;
}
# all other traffic
location / {
root /usr/share/nginx/html;
try_files $uri /trust/start_game/start_game.html$is_args$args;
include /etc/nginx/mime.types;
}
location /start_game {
return 404;
}
}
`
When requesting http://localhost i get the following errors
Console errors
but the actual path http://localhost/trust/start_game/start_game.html directly to the view resolves without any issues.
Thank you for your time
Related
I want to include google map places service into my app, and in my index.html file I have an error:
Uncaught SyntaxError: Unexpected token '<' (at js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}:1:1).
You can see that I'm using backtick to add the google map API key into the src url. But how can I have an error about < here?
The index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta."description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script async
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}>
</script>
<script>
let autocomplete;
function initAutoComplete() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),
{
types: ['geocode'],
componentRestrictions: {'country': ['NL', 'CN', 'US']},
fields: ['place_id', 'geometry', 'name'],
},
)
}
</script>
<div id="root"></div>
</body>
</html>
The manifest and the favicon are dependent on the light/darkmode is there any way of changing them as the user changes the mode in the operating system?
Ive got the event listener firing
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => {
if (e.matches) console.log('your in dark mode);
});
but the manifest is loaded from the react public folder..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My Site</title>
</head>
<body>
<noscript>Please enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Not sure how to handle the favicon that is also in the root of the public folder. Also the meta tag for theme-color would need to change.
Using the suggestion from #kishore I've managed to get the favicon working, I'm sure someone better can tighten up my code but it works, in the html I added an id...
<link rel="shortcut icon" id='favicon' href="%PUBLIC_URL%/favicon.ico" />
<link rel="manifest" id='manifest' href="%PUBLIC_URL%/manifest.json" />
then in the head section I added...
<script>
const usesDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || false;
const favicon = document.getElementById('favicon');
const manifest = document.getElementById('manifest');
function switchIcon(usesDarkMode) {
if (usesDarkMode) {
favicon.href = '%PUBLIC_URL%/favicon-dark.ico';
manifest.href='%PUBLIC_URL%/manifest-dark.json'
} else {
favicon.href = '%PUBLIC_URL%/favicon-light.ico';
manifest.href='%PUBLIC_URL%/manifest-light.json'
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => switchIcon(e.matches));
switchIcon(usesDarkMode);
</script>
you can change dynamically using js
document.getElementById('favicon_id').href = 'required_link'
do this inside onchange function
I have a React app and I'm using a template for this app. This is my react app's folder structure:
|app
|-client
|---assets
|---component
|-node_modules
|-server
|---index.html
|---index.js
In my server/index.html there are many static files such as css, js and img.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/assets/img/logo-fav.png">
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css"/>
</head>
<body>
<div class="be-wrapper" id="root">
</div>
<script src="bundle.js"></script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
Plugins.init();
});
</script>
</body>
</html>
How to handle those files in a React app? Meanwhile in a Node JS app we use this to handle static files:
app.use('/assets',express.static(__dirname + '/assets'));
the static file isn't loaded and not found if i type eg:
localhost:3000/assets/js/jquery, the file is not available
and this is my server/index.js file:
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
let app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));
app.use('/assets',express.static(__dirname + '/assets'));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname,'../index.html'));
})
app.listen(3000, () => console.log('Running port 3000'));
Thank you.
You can put static files as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Container Components Example</title>
<link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/css/bootstrap.theme.min.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div id="root"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
Source: https://github.com/johibkhan2/react-sample-app/blob/master/index.html
Here is a snippet of the paths I am using:
<link rel="stylesheet" type="text/templates.css" href="../templates/css/superfish.css" th:href="#{../templates/css/superfish.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/style.css" th:href="#{../templates/css/style.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/nivo-slider.css" th:href="#{../templates/css/nivo-slider.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.qtip.min.css" th:href="#{../templates/css/jquery.qtip.min.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery-ui.css" th:href="#{../templates/css/jquery-ui.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.fancybox.css" th:href="#{../templates/css/jquery.fancybox.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.fancybox-buttons.css" th:href="#{../templates/css/jquery.fancybox-buttons.css}"/>
Controller:
#RequestMapping(value="/", method= RequestMethod.GET)
public String contactForm(#Valid #ModelAttribute("contact") Contact contact, BindingResult bindingResult,
HttpServletRequest request, Model model, Device device) throws IOException {
System.out.println("Inside controller-----------------");
main method:
#SpringBootApplication
#ComponentScan("com.stidham")
public class StidhamFinancialApplication extends SpringBootServletInitializer {
#Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(StidhamFinancialApplication.class);
}
public static void main(String[] args) {
SpringApplication.run(StidhamFinancialApplication.class, args
);
}
}
Only the html renders, no js or css. I have tried several ways and the path I currently have looks correct and even my IDE auto fills as I type in the path.
In the war file they are also in the correct place.
mvn clean install builds correctly, they're no dependency issues. This seems just like a simple path issue that is not working when deployed.
---------------Update 1---------------
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="/css/superfish.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/nivo-slider.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-buttons.css"/>
new paths
Still getting 404 for js and css:
The folder "templates" is only reserved for thymeleaf to process html. JavaScript and CSS should be in the folder "static". This folder is mapped directly to the root URL for http.
Example: File located in ... /resources/static/css/superfish.css
<link rel="stylesheet" href="/css/superfish.css" />
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css