i worked with laravel 5.7, in local it run good, but after i deployed the app to production server (heroku) the CSS and JS seems not working. what should i do?
this the url "https://arrahnu-demo.herokuapp.com/
<head>
<meta charset="utf-8">
<title>Arrahnu Gadai Indonesia</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="{{asset('/img/favicon.png')}}" rel="icon">
<link href="{{asset('/img/apple-touch-icon.png')}}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{{asset('/lib/bootstrap/css/bootstrap.css')}}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{{asset('/lib/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
<link href="{{asset('/lib/animate/animate.min.css')}}" rel="stylesheet">
<link href="{{asset('/lib/ionicons/css/ionicons.min.css')}}" rel="stylesheet">
<link href="{{asset('/lib/owlcarousel/assets/owl.carousel.min.css')}}" rel="stylesheet">
<link href="{{asset('/lib/magnific-popup/magnific-popup.css')}}" rel="stylesheet">
<link href="{{asset('/lib/ionicons/css/ionicons.min.css')}}" rel="stylesh">
<!-- Main Stylesheet File -->
<link href="{{asset('/css/style.css')}}" rel="stylesheet">
</head>
Your <link>s are fetching http instead of https.
And as your website on Heroku is served through https, the browser is blocking the mixed content.
Related
I integrated my react project successfully with Django. But every time I run the Django server, I get a manifest.json not found error.
Also, when I ever I make any changes to the react app, it's not live to update when I run the Django server. I have to call npm run build every time to update the Django website.
Is there a solution for this such that I do not get the manifest.json not found error and also the website server live updates as I update the front end react code.
index.html
<head>
<meta charset="utf-8" />
<link rel="icon" href="/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="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<script>var Alert = ReactBootstrap.Alert</script>
<title>React App</title>
<link href="/static/css/2.e58a5209.chunk.css" rel="stylesheet">
<link href="/static/css/main.f38b3f41.chunk.css" rel="stylesheet">
</head>
urls.py
path('', TemplateView.as_view(template_name='index.html')),
Directory Structure:
enter image description here
I want to implement a chat client. so I tried with conversejs. but I can't found to integrate it with the react application. Is there any way to do it?
<!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
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/7.0.2/dist/converse.min.css">
<script src="https://cdn.conversejs.org/7.0.2/dist/converse.min.js" charset="utf-8"></script>
<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`.
-->
</body>
<script>
converse.initialize({
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous#conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous#conference.nomnom.im',
],
singleton: true,
show_controlbox_by_default: true,
view_mode: 'overlayed'
});
</script>
</html>
I have a index.html that is served by a node.js server, unfortunately I am having trouble loading bootstrap when I use my local downloaded bootstrap library; when I use bootstrap served from the web it works fine.
Website works when bootstrap included like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Website doesn't work when bootstrap included like this
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link type="text/json" href="node_modules/bootstrap/dist/css/bootstrap.min.css.map">
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link type="text/json" href="node_modules/bootstrap/dist/js/bootstrap.min.js.map">
When I look at the node server logs, I see that the source map is failing to be served to the client.
/node_modules/bootstrap/dist/js/bootstrap.min.js.map
_http_outgoing.js:464
throw err;
^
TypeError [ERR_HTTP_INVALID_HEADER_VALUE]: Invalid value "undefined" for header "Content-type"
at ServerResponse.setHeader (_http_outgoing.js:473:3)
at C:\Users\Dwight\work\trainingwebsite/Server.js:109:20
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
I've tried using bootstrap 4.0.0 and 4.4.1 but both exhibit the same behaviour.
Why is this happening only when I use my local bootstrap? I've tried setting different types for the source map include but I keep getting the same error...
Update:
When I disable source maps on google chrome settings, the site loads fine with local bootstrap.
Try changing it to:
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css.map">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script href="node_modules/bootstrap/dist/js/bootstrap.min.js.map">
I wrote some html/js codes for db management in apache cordova/android.
Firstly i wanted to copy a sqlite db to my project.
i used a plugin for this. dbcopy.
I read docs.
And i wrote some codes. But it is not working. in some functions, i wrote some alerts. But they are not working.
I am using jquery mobile in apache cordova.
My codes;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css">-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/sqlDB.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function dbcopy()
{
//Database filename to be copied is demo.db
alert('copy is starting');
//location = 0, will copy the db to default SQLite Database Directory
window.plugins.sqlDB.copy("ogrenci.sqlite", 0, copysuccess,copyerror);
}
function copysuccess()
{
//open db and run your queries
alert("copysuccess");
db = window.sqlitePlugin.openDatabase({name: "ogrenci.sqlite"});.
}
function copyerror(e)
{
//db already exists or problem in copying the db file. Check the Log.
console.log("Error Code = "+JSON.stringify(e));
//e.code = 516 => if db exists
}
dbcopy();
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Arif's App</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Copyright 2016</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Did you install the plugin? you can install to your project by running the following command on your cordova project directory:
cordova plugin add cordova-plugin-dbcopy
In OS X Safari, you tap the URL address pane and it will show a window containing the site icons of the sites you added to your favorite folder.
Some sites like bing.com is represented by their site icon, some are not.
My site is one of those unfortunate ones.
Currently I'm using this HTML:
<link rel="Bookmark" href="../favicon.ico">
<link rel="shortcut icon" href="../favicon.ico" >
<link rel="apple-touch-icon" sizes="57x57" href="../favicon57_57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../favicon114_114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../favicon72_72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../favicon144_144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../favicon60_60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../favicon120_120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../favicon152_152.png" />
this works fine for iOS safari and OS X Chrome, but it doesn't work for OS X Safari.
What should I do?
I'm using OS X 10.10 Yosemite and Safari 8.0.6
The icon I'm looking for appears here: