I am building a simple website with google app engine.
I am trying to write mathematical expressions in a html document by using mathjax.
The code in the html document is:
<html>
<head>
<title> Home page </title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
$$x^2 = \frac{1}{2}$$
</body>
</html>
When I use the same html code outside of the GAE the expression is displayed normally. When I run it through GAE the expression is displayed
as $$x^2 = \frac{1}{2}$$. My app.yaml is:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /.*
script: main.app
Do i have to change something in app.yaml? Can anyone help me?
If you view the content of the the source url in your document http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML you'll see that it's a script that displays a console warning:
console.warn('WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips.')
The page referenced in the warning message provides alternative cdn urls that you can use instead of the retired url.
thanks a lot, I also added the follow script between the head tag and over the other script and it worked fine:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
Related
Failed to load resource: the server responded with a status of 404 (Not Found) mistakes shows himself in console for Lighbtox.js. I downloaded the file and put into the my js file, I put the url path corrcetly to the bottom of my project after bootstrap and jquery js files.
I downloaded the file from original place.
I created a minimal working example as follows. It does work with the latest jquery. Make sure jquery script tag is before the lightbox script tag.
my index.html
<html>
<head>
<script src="js/jquery-3.4.1.min.js"></script>
<link href="css/lightbox.min.css" rel="stylesheet" />
</head>
<body>
Image #1
<script src="js/lightbox.min.js"></script>
</body>
</html>
File structure
And the result
I'm building a simple react app that I'm deploying to S3. I used's facebook's create-react-app as a starting point. I want to add a conditional in my index.html so that I'm only including Google Analytics in production.
To test that it's working I have code like this: (I intend to change the string below to 'production' once I validate that everything is working correclty)
<%= '%NODE_ENV%' %>
<% if ('%NODE_ENV%' == 'development') { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>
When I load my app locally using npm run start. I see that it prints development on the page but that the Google Analytics script tag is NOT on the page.
How is it possible that on my first line of webpack JS %NODE_ENV% is equal to 'development' and then on the very next line that condition fails??
Here's is the HTML that is output locally:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
development
<script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>
As you can see it prints 'development' but then has an empty line where the script tag would have gone had the condition passed.
I'm new to webpack and I'm very confused about this behavior. Any help would be much appreciated!
After much investigation, I think I've figured out what's going on here. The reason the first line is correct and then the second isn't has nothing to do with your code, but with the way create-react-app actually inserts those environment variables.
create-react-app is using a plugin call InterpolateHtmlPlugin, which calls a hook from HtmlWebpackPlugin. Basically what InterpolateHtmlPlugin does is look for %env_var_name% in the HTML and replace it with the corresponding value in the environment object in the app.
The issue is by the time the HTML makes it to the InterpolateHtmlPlugin the template code has already been processed (after my tests, I'm pretty sure this is true). Since it's already been processed that conditional has evaluated to false and doesn't show up in the HTML anymore. For the first line, it shows up at %NODE_ENV%, so Interpolate picks it up and replaces it.
I think the easiest thing to do is to add the NODE_ENV to your HtmlWebpackPlugin in your webpack configs and reference it that way. So your new HtmlWebpackPlugin configuration would look like this:
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
NODE_ENV: env.raw.NODE_ENV
})
and the conditional in your index.html file would look like this:
<% if (htmlWebpackPlugin.options.NODE_ENV == 'development') { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>
<% if (process.env.NODE_ENV == 'development') { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>
I have a react website and in my html template I put the google analytics tracking code snippet.
The tracking works on my local (so I can actually see my dev session in GA console) but it doesn't work after I deploy to cloud. Here how my template looks like and react just render the root div.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root" />
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="GA link..."></script>
<script>
GA tracking code...
</script>
</html>
My site is here. You can see from the source code the tracking code is there. However current session just doesn't show up in GA.
When I go to your site I see calls going out to Google Tag Manager and Google Analytics and Doubleclick.
Maybe you have a script blocker (uBlock Origin, Noscript, ...) disabled on localhost but active on the production site?
I resolved it eventually. Regenerate another project in GA and use the new project worked for me. Maybe it was something mess up with my old project setup.
I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.
My index.html file is:
<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>
<div ng-controller="topicsController">
<div>{{ topics }}</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file:
var app = angular.module('discussApp', ['ngResource']);
app.controller("topicsController", function($scope, $resource, $http) {
var Topics = $resource("http://api.discussorama.com/v1/topics");
$scope.topics = Topics.query();
});
And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.
The answer was in the console log all along. The error I was receiving was:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The solution was simply to add
header("Access-Control-Allow-Origin: *");
to my Slim API's index.php file. I guess my shared host isn't configured for CORS.
I have a Google App Engine app that works fine on the dev server. However, when I upload it, the CSS is gone. The scripts are still there, however.
From app.yaml:
- url: /scripts
static_dir: Static/Scripts
- url: /styles
static_dir: Static/styles
From the base template:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="./scripts/JQuery.js"></script>
<script type="text/javascript" src="./scripts/sprintf.js"></script>
<link rel="stylesheet" href="./styles/style.css" type="text/css" media="screen" />
</head>
What could be causing this? Am I doing something wrong?
The URL you're serving by specifying - url: /scripts is going to be something like http://foobar.appspot.com/scripts. The URL you're requesting, given that you chose to use href="./styles/style.css", will be the same only for top-level pages -- if you have that header on, say, http://foobar.appspot.com/good/grief, then you'll be requesting your styles from http://foobar.appspot.com/good/styles/style.css and the like. Why would you want that?! Use href="/styles/style.css", without that extremely peculiar leading dot, and you'll be requesting the style from http://foobar.appspot.com/styles/style.css -- which looks to be where you want to be serving it from -- whatever page on foobar.appspot.com you request it from.
In addition to Alex's answer, I note you seem to be using capitalization inconsistently - some first letters are capitalized, and others aren't. Bear in mind that while Windows is not case-insensitive, most platforms are case-sensitive - so if you weren't strict about using the same capitalization for the same name everywhere, when you deploy, you will get a lot of 404s in place of expected files.