I've got an idea to run Flutter app on WebOS. I've downloaded the latest WebOS sdk and a Simulator (as they already deprecated the Emulator)
I've created a simple Hello World app that simply uses HTML and it ran just fine on the Simulator. Then I decided to add a logic for running Flutter app to it. So now the compiled app structure is like this
The content of the index.html is as follows
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_iz_tube_tv">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>IZ Tube TV</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '3924677883';
</script>
<script src="flutter.js" defer></script>
<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
And here is the content of appinfo.json
{
"id": "com.example",
"version": "0.0.1",
"vendor": "Test TV",
"type": "web",
"main": "index.html",
"title": "tv_app",
"icon": "icon.png",
"largeIcon": "largeIcon.png"
}
This app runs fine in browser if I use a web server.
But the problem starts when I load it on a WebOS Simulator using App button on RCU.
I just cannot run. And the problem is, obviously, because it uses a simple file: protocol instead of running an http server.
I've googled a lot and haven't found a solution to this.
Does anyone know how to run an app like this in simulator?
I've found out it's impossible to do in a Simulator. But there is a workaround. We can add a redirection to the "head" part of index.html file like this (https://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/):
<meta http-equiv="refresh" content="0;url=http://0.0.0.0:8080/index.html">
Thus effectively redirecting it to the remote app. And WebOS can display a Flutter app
Related
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like not all styles were loaded,
Please try enter to login into adminarea by url :
https://bi-currencies.my-demo-apps.tk/admin/currencies
credentials are in Login form
and pages looks like : https://prnt.sc/TCjBh0SefUMO 4
But if to refresh page with “CTRL+R” pages looks ok, in dark mode.
Any ideas why so and how that can be fixed?
More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0").
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )
I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home
I see this problem of other browsers of my Kubuntu 20 too.
Maybe problem is that that I use too different templates, but actually I use different layouts, so in
app/Http/Middleware/HandleInertiaRequests.php :
public function rootView(Request $request)
{
if ($request->segment(1) == 'user') {
return 'layouts/user';
}
if ($request->segment(1) == 'admin') {
return 'layouts/adminlte'; // TODO
}
return 'layouts/frontend'; // Current request is front-end
}
This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght#300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Styles -->
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link rel="stylesheet" href="/css/theme.css">
<script src="/vendors/#popperjs/popper.min.js"></script>
<script src="/vendors/bootstrap/bootstrap.min.js"></script>
<script src="/vendors/is/is.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="/vendors/fontawesome/all.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
and admin template resources/views/layouts/adminlte.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Styles -->
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/css/fontawesome_all.min.css">
<link rel="stylesheet" href="/css/adminlte.min.css">
<link rel="stylesheet" href="/css/admin_custom.css">
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="/js/Chart.bundle.js"></script>
<script src="/js/OverlayScrollbars.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
1 common resources/js/app.js :
require('./bootstrap');
window.Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
require('#fortawesome/fontawesome-free/js/all.min.js');
// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import mitt from 'mitt';
window.emitter = mitt();
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
import Multiselect from '#vueform/multiselect'
import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";
const app = createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('inertia-link', Link)
.component('Paginate', Paginate)
.component('file-upload', VueUploadComponent)
.mixin({ methods: { route } })
.component('multiselect', Multiselect)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :
\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');
but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?
Thanks!
Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.
Reason (problem):
As you have used one layout for frontend-pages (public pages) and other one for admin-pages.
So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.
But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.
I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.
Solution:
Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:
<a :href="route('home')">
Home
</a>
By this way appropriate layout style-script got loaded.
My Assumption:
Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.
I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.
Attach CSS sheet
<link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
Attach JavaScript/jQuery scripts
<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
After using asset() method, your links in site-source-code (Ctrl+U)
looks something like that:
Note:
make sure you must set appropriate APP_URL in .env file.
I'm trying to create a Flutter web app with Firebase integrated to handle authentication. I've gone through the usual process of setting up the firebase app but when I come to run my app on Chrome I get the following message:
The following JSNoSuchMethodError was thrown building Consumer<OurUser>(dirty, dependencies: [_InheritedProviderScope<OurUser>]):
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="rafflello">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>rafflello</title>
<link rel="manifest" href="manifest.json">
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-storage.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: apiKey,
authDomain: authDomain,
projectId: projectId,
storageBucket: storageBucket,
messagingSenderId: messagingSenderId,
appId: appId,
measurementId: measurementId
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
And my pubspec.yaml (might be slightly misaligned here but ok in file):
dependencies:
flutter:
sdk: flutter
firebase_auth: ^0.20.0+1
I've tried the firebase configuration inside the head tags and body. What am I missing?
Turns out this part of my index.html file
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
was in the wrong order. firebase-app.js needs to be before firebase-auth.js.
App is now working
We are trying to build a WebApp in flutter. Our app runs on a simulator without any errors. I've been able to pull the app up on a Chrome browser without any issues. But when I try to sign in (using email and password with firebase) it's giving me this error in the terminal:
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'
I've seen a lot of people asking the same thing but none of the answers seem to be fixing the issue.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="makeshift_homeschool_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>makeshift_homeschool_app</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyB8KqDPKUzCjun4TqVanvnyObjE5fGqc4g",
authDomain: "makeshift-homeschool-281816.firebaseapp.com",
databaseURL: "https://makeshift-homeschool-281816.firebaseio.com",
projectId: "makeshift-homeschool-281816",
storageBucket: "makeshift-homeschool-281816.appspot.com",
messagingSenderId: "60367595636",
appId: "1:60367595636:web:84014c2d6a7c4493920921",
measurementId: "G-VBYH88L0VN"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I've tried putting the firebase-app.js code in the <head> but it didn't work for me.
Does anyone know how to fix this?
I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.
I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!
Here is my file structure:
- dist
- src
- assets
- css
- img
- js
- favicon.ico
- index.html
- public
- index.html
- src
- App.vue
- main.ts
- .firebaserc
- firebase.json
- package.json
- vue.config.js
Compiled index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=msapplication-tap-highlight content=no>
<meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
<meta name=keywords content=steel,building,metal,structural,design,manufacture>
<title>Company Name</title>
<link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
<meta name=theme-color content=#6e8995>
<link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
<link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
<link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
<link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
<link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
<link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
<script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
<script src=/dist/src/assets/js/app.00d6273a.js></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<title>Company Name</title>
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../src/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
<link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Built files will be auto injected -->
<div id="app"/>
</body>
</html>
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
.firebaserc
{
"projects": {
"default": "schedule-maxx"
}
}
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
vue.config.js
module.exports = {
runtimeCompiler: true,
lintOnSave: true,
productionSourceMap: false,
outputDir: 'dist',
assetsDir: 'src/assets',
baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
}
}
}
}
With regards to your file structure, in particular:
dist
public
index.html
and to the fact that you rewrite to /index.html (cf. firebase.json file)
I think that your firebase.json file should start as follows. (However, since you don't show what's in the dist directory I am not 100% sure!):
{
"hosting": {
"public": "public",
....
}
}
and the static directory generated by webpack should also be deployed under the public directory. It is most probably under the dist directory for the moment.
It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.
I have done my research with grunt-injector. However, I have not found anything explains simply enough the process of injecting some file to another by grunt-injector.
My index.html header:
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>SmartHome</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- build:css(client) styles/global.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css" />
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/nouislider/distribute/nouislider.min.css" />
<!-- endbower -->
<!-- endbuild -->
Everytime I run grunt serve, it would delete the
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
I have no idea why. My bower.json has included bootstrap ~3.3.4 as a dependency. I've tried numerous methods with bower install --dev etc... But no luck to get this link back.
So I think my last resort would be to use the grunt-injector function. Can anyone gives me a hint with the syntax needed ? My files structure:
/client/
---bower_components/
(somemore folders)
---bootstrap.css
index.html
For this task you can use: https://github.com/taptapship/wiredep
Example:
wiredep: {
task: {
// Point to the files that should be updated when
// you run `grunt wiredep`
src: [
'src/main/resources/view.html'
],
options: {
// See wiredep's configuration documentation for the options
// you may pass:
// https://github.com/taptapship/wiredep#configuration
}
}
}
injector: {
options: {
// Task-specific options go here.
},
bower_dependencies: {
files: {
'index.html': ['bower.json'],
}
}
}