How to serve Html, CSS and JS file in a Folder.

pythonhubdev commented 3 years ago

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.Js

The Javascript File and the CSS file or not shown while the HTML is loaded.

felixblaschke commented 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)

pythonhubdev commented 3 years ago

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?

pythonhubdev commented 3 years ago

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.

felixblaschke commented 3 years ago

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/">.

pythonhubdev commented 3 years ago

It worked thanks that's great

rohitsangwan01 commented 2 years ago

@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

felixblaschke commented 2 years ago

@rohitsangwan01 This is not what a server application is supposed to do. You are looking for this.

rohitsangwan01 commented 2 years ago

@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

felixblaschke commented 2 years ago

@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.

rohitsangwan01 commented 2 years ago

@felixblaschke ,Great seems like this will do the job , Thanks

rknell / alfred

How to serve Html, CSS and JS file in a Folder. #34