Closed pythonhubdev closed 3 years ago
There is an example how to do it: https://github.com/rknell/alfred/blob/master/example/example_static_files.dart
If you are using a SPA with own routing, use this as your base: https://github.com/rknell/alfred/blob/master/example/example_single_page_application.dart
Make sure to use the latest pre-release version (https://pub.dev/packages/alfred/versions/0.1.0-alpha.7)
I am trying to serve a web application build with Flutter web.
Then I used the command flutter build web --release
Can I serve this with Alfred?
My index.html
<!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="counter">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Counter</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('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=1053676400');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
My Dart Code
import 'dart:io';
import 'package:alfred/alfred.dart';
void main() async {
final app = Alfred();
app.get('/frontend/*', (req, res) => Directory('E:\\Workspace\\Tacklebox\\Jose\\counter\\build\\web'));
app.get('/frontend/*', (req, res) {
res.headers.contentType = ContentType.html;
return File('E:\\Workspace\\Tacklebox\\Jose\\counter\\build\\web\\index.html');});
await app.listen();
}
I only see titles other than that nothing works on the website. How can I make it work?
Please help.
This is a tricky one. You need to configure <base href="/">
in your index.html
to the public visible route. A Flutter web SPA is design to run as root-url application on a host.
For your specific code set it to <base href="/frontend/">
.
It worked thanks that's great
@felixblaschke @pythonhubpy can we achieve this on mobile platform in flutter , i want to store that flutter_web folder in assets and supply those by local connection
@rohitsangwan01 This is not what a server application is supposed to do. You are looking for this.
@felixblaschke no actually i want to create a server on my android device with alfred , and users can connect to same wifi and in their browser they open that server like , ip:3000/frontend , and they can access that flutter_web app in their browser , which is hosted on my android and serverd by Alfred , something like this , whole idea is to share android files ( Like Videos and Photos) by localhost using Alfred , and an web interface to access them using flutterWeb
@rohitsangwan01 Okay now I understand what you want to do. Looks like this easily achievable. Compare to this package: https://pub.dev/packages/local_assets_server
If pkg:alfred misses something. Please open a new issue. Maybe you can look into what's missing and contribute it via PR.
@felixblaschke ,Great seems like this will do the job , Thanks
I have a folder called web which contains HTML, CSS, and Javascript files.
I need to serve the HTML file with CSS and Javascript as well how can I do that in Alfred.
something like
res.render('index.html')
in Node.JsThe Javascript File and the CSS file or not shown while the HTML is loaded.