在没有android studio的情况下在本地运行Flutter Web App [英] Running flutter web app locally without android studio

问题描述

我有一个使用Firebase的云Firestore的flutter应用程序.我已经完成了网络构建，并且可以通过Android Studio在Chrome上正常运行.我想与我的客户分享我的Web应用进度，但不想托管它(因为它尚未完成).因此，我想找到一种在本地运行它的方法，就像在Android Studio上执行该方法一样，而无需安装Android Studio(并且希望也不需要安装flutter)，以便可以将构建文件发送到我的客户，他们可以在自己的计算机上运行它(使用脚本在本地启动Web服务器并运行Web应用程序).

我已经尝试了以下Web构建文件夹(index.html所在的文件夹)中包含的脚本

 从BaseHTTPServer导入BaseHTTPRequestHandler，HTTPServer从httplib导入HTTPResponse从os import curdir，sep#除代码外，创建一个index.html#运行:python server.py#运行后，尝试http://localhost:8080/类RequestHandler(BaseHTTPRequestHandler):def do_GET():如果self.path =='/':self.path ='/index.html'尝试:sendReply = False如果self.path.endswith(.html"):mimeType ='文本/html'sendReply = True如果sendReply == True:f =打开(curdir + sep + self.path)self.send_response(200)self.send_header('Content-type'，mimeType)self.end_headers()self.wfile.write(f.read())f.close()返回除了IOError:self.send_error(404，'找不到文件！')def run():print('http服务器正在启动...')#默认情况下，http服务器端口为80server_address =('127.0.0.1'，8080)httpd = HTTPServer(服务器地址，RequestHandler)尝试:打印"http服务器正在运行..."httpd.serve_forever()除了KeyboardInterrupt:httpd.socket.close()如果__name__ =='__main__':跑步() 

但是在Chrome上打开 http://localhost:8000 时，出现空白页面，控制台显示错误:

 无法加载资源:net :: ERR_EMPTY_RESPONSE main.dart.js:1无法加载资源:net :: ERR_EMPTY_RESPONSE manifest.json:1无法加载资源:net :: ERR_EMPTY_RESPONSE:8080/favicon.png:1 

我还通过运行尝试了NPM

如何创建本地服务器，可以在本地托管我的Web应用程序并在本地运行它而无需在Internet上托管它?

解决方案

正如您在此处的评论中所述.

使用以下命令创建文件app.js:

  const express = require('express')const app = express()const端口= 8000app.get('/'，(req，res)=> {console.log('获取请求')res.sendFile('website/y.html'，{root:__ dirname})})app.use(express.static(__ dirname +'/website'))app.use((req，res)=> {res.redirect('/')})app.listen(port，()=> {console.log(`在http://localhost:$ {port}`监听的应用)}) 

这里我的网站文件位于 website 文件夹中，我的入口点是 y.html .设置静态文件目录(您的网站页面)，然后为根请求提供.html

示例项目: https://github.com/ondbyte/website

最后，要运行它，请打开终端并移至根文件夹.然后做

  npm初始化npm install express-不保存节点app.js 

I have a flutter app using Firebase's cloud firestore. I've done the web build and running it on Chrome through Android Studio works well. I would like to share my web app progress to my client but don't want to host it (because it's not finished yet). Hence I'd like to find a way to run it locally the same way you can do it with Android Studio but without needing to install Android Studio (and hopefully not requiring to install flutter either), so that I can send the build file to my client and they can run it in their machine (with a script to start the web server locally and run the web app).

I have tried the following script included inside the web build folder (where the index.html is)

from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer
from httplib import HTTPResponse
from os import curdir,sep

#Create a index.html aside the code
#Run: python server.py
#After run, try http://localhost:8080/

class RequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/':
            self.path  = '/index.html'
        try:
            sendReply = False
            if self.path.endswith(".html"):
                mimeType = 'text/html'
                sendReply = True
            if sendReply == True:
                f = open(curdir + sep + self.path)
                self.send_response(200)
                self.send_header('Content-type', mimeType)
                self.end_headers()
                self.wfile.write(f.read())
                f.close()
            return
        except IOError:
            self.send_error(404,'File not found!')


def run():
    print('http server is starting...')
    #by default http server port is 80
    server_address = ('127.0.0.1', 8080)
    httpd = HTTPServer(server_address, RequestHandler)
    try:
        print 'http server is running...'
        httpd.serve_forever()
    except KeyboardInterrupt:
        httpd.socket.close()

if __name__ == '__main__':
    run()

But when opening http://localhost:8000 on Chrome I get a blanc page and the console shows the errors:

Failed to load resource: net::ERR_EMPTY_RESPONSE main.dart.js:1
Failed to load resource: net::ERR_EMPTY_RESPONSE manifest.json:1 
Failed to load resource: net::ERR_EMPTY_RESPONSE :8080/favicon.png:1

I also tried NPM local-web-server by running ws --spa index.html but just getting a ERR_EMPTY_RESPONSE response.

This is what I have in my build/web after running flutter build web:

How can I create a local server where I can host my web app locally and run it locally without hosting it on the internet?

解决方案

as you mentioned in the comment here you go.

Create a file app.js with the following:

const express = require('express')
const app = express()
const port = 8000


app.get('/', (req, res) => {
    console.log('getting request')
    res.sendFile('website/y.html',{root:__dirname})
  })

app.use(express.static(__dirname + '/website'))

app.use((req, res)=>{
    res.redirect('/')
})

app.listen(port, () => {
    console.log(`app listening at http://localhost:${port}`)
  })

Here my website files exist at website folder and my entry point is y.html. Set the static file directory (your website page) and then serve the .html for the root request

example project: https://github.com/ondbyte/website

Finally, to run it open terminal and move to the root folder. Then do

npm init
npm install express --no-save
node app.js

这篇关于在没有android studio的情况下在本地运行Flutter Web App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！