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>
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've created
a Blazor Server app (BlazorServerApp)(.Net Core 3.1)
a .NET Standard Class Library (MyClassLibrary)
I've added the MyClassLibrary project to the dependencies of the BlazorServerApp. Then I've added wwwroot folder to the MyClassLibrary project and added test.js file to this folder.
I've edited the MyClassLibrary project file as follows:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<AssemblyName>MyClassLibrary</AssemblyName>
<RootNamespace>MyClassLibrary</RootNamespace>
</PropertyGroup>
<ItemGroup>
<EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
</Project>
Blazor web app call the UseStaticFiles method in Startup, which enables static files to be served:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
I've added the test.js as <script src="_content/MyClassLibrary/test.js"></script> in the _Host.cshtml (BlazorServerApp project):
#page "/"
#namespace BlazorServerApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorServerApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>
However, when I run the BlazorServerApp project the error appears in the browser:
GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404
That is, the web app doesn't find such a resource at the specified path.
Can anyone explain why this is happening and what needs to be done in order for the application to access static resources (such as js or css) in other dependent projects (net standard class library in my case)?
Open the component project properties and go to package tab.
You must set a value in Package id
Then you use this id to specify the path
<script src="_content/package_id/test.js"></script>
I know this was about two years ago, but I found an answer to this.
If you are running your app in Development, chances are you are finding your static web assets just fine. But, if you change your ASPNETCORE_ENVIRONMENT to anything else you will find you get a bunch of 404 errors when trying to get your assets.
To work around this add StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment,builder.Configuration); to your main Main method, or your Program.cs in .net 6.
I found this information here on the aspnetcore github. They talk more about the static asset loader here which is where I found how to use it, but the issue on 38212 seemed to be unrelated. I didn't do a deep dive on how the static asset loader worked though, or why it's needed.
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.
I use inspect to check and it shows as below:
lottie.js:3 Failed to load file:///Users/Downloads/ani/js/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I dont know how to read Json from a .json file from my local sever?
can anyone help me to solve it?
var animation = bodymovin.loadAnimation({
container: document.getElementById('Ani'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'js/data.json'
})
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bodymovin Demo</title>
<!-- Styles -->
<style>
#Ani{max-width: 800px; margin:0 auto;}
</style>
</head>
<body>
<div id="Ani"> </div>
<!-- Scripts -->
<script src="js/lottie.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You are opening the file with the file protocol and you try an Ajax request. That wont work. You better open the file over a server. You can use apache or any webserver? By example if you are familiar with Node you can use http-server
or use lite-server.
npm install http-server -g
http-server 'path/to/your/project' -o
That should open the browser window at: localhost:8080 or other port if 8080 is not free
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