Phoenix App中的预编译单页应用程序 [英] Precompiled Single-Page-Apps in Phoenix App

问题描述

我有一个预编译的ember.js应用程序(这里的fronted-js-framework无关紧要)，它基本上由一个带有index.html文件的文件夹和一些js/css资产组成.

I have a pre-compiled ember.js app (which fronted-js-framework shouldn't matter here), which basically consists of a folder with a index.html file, and a few js/css assets.

我将此文件夹放置在我的phoenix应用程序中的/priv/static下，并尝试获取路由以供使用...到目前为止没有成功.我使用的是phoenix版本0.17.1(与1.0 afaik相同).我按此顺序尝试了以下步骤:

I placed this folder under /priv/static in my phoenix app, and tried to get the routing to serve it... without success so far. I'm on phoenix version 0.17.1 (same as 1.0 afaik). I tried the following steps, in that order:

• 在endpoint.ex中，我删除了only: ~w(...)过滤器.
• 通过单个操作为文件提供了最低限度的控制器: def index(conn, _params) do redirect conn, to: "/my_app/index.html" end
• 将控制器添加到我的route.ex中: get "/my_app", MyCustomController, :index

• In endpoint.ex, I removed the only: ~w(...) filter.
• Implemented a bare minimum controller with a single action to serve the file: def index(conn, _params) do redirect conn, to: "/my_app/index.html" end
• added the controller to my routes.ex: get "/my_app", MyCustomController, :index

到目前为止，上述所有步骤均无效，我仅收到错误no route found for GET /my_app/index.html.我该如何解决这个问题?我只想将URL "/my_app"(或者，如果没有其他作用，则是"/my_app/index.html")映射到我的phoenix应用程序中的路径priv/static/my_app/index.html.有任何想法吗?

None of the above steps worked so far, I only get the Error no route found for GET /my_app/index.html. How could I solve this Issue? I just want to map the URL "/my_app" (or, if nothing else works, "/my_app/index.html") to the path priv/static/my_app/index.html within my phoenix app. Any ideas?

编辑:

我尝试实现的基本工作流程如下:

The basic workflow I try to implement is the following:

我有不同的开发人员，他们在$phoenix_root/apps/的专用文件夹中构建了ember.js SPA.因此，我有一个开发人员使用ember和ember-cli构建$phoenix_root/apps/my_app.该开发人员在开发其应用程序时使用ember server，并且在后台运行mix phoenix.server，因为phoenix应用程序本身将所需的数据作为RESTful API公开.

I have different developers that build some ember.js SPAs in their dedicated folder, located in $phoenix_root/apps/. So I have a developer building $phoenix_root/apps/my_app with ember and ember-cli. This developer uses ember server while developing his app, and has mix phoenix.server running in the background, because the phoenix app itself exposes the required data as an RESTful API.

在实现每个已实现的功能之后，前端开发人员键入ember build [...]，此任务将整个ember.js前端应用程序编译到具有index.html文件和一些资产的单个文件夹中，并将此文件夹移至$phoenix_root/web/static/assets/my_app.然后，凤凰(或早午餐)触发，并将这些东西按原样复制到$phoenix_root/priv/static/my_app，随时可以像其他资产一样使用.

After each implemented feature, the frontend developer types ember build [...], this task compiles the whole ember.js frontend app into a single folder, with a index.html file and some assets, and moves this folder to $phoenix_root/web/static/assets/my_app. Then phoenix (or, brunch) triggers, and copies this stuff as-is to $phoenix_root/priv/static/my_app, ready to be served like any other asset.

重点是能够在单个代码库(phoenix应用程序)中构建一堆隔离的前端"作为自包含软件包，而phoenix应用程序本身还有其他工作要做.

The point is to be able to build a bunch of isolated "frontends" as self-contained packages within a single code base (the phoenix app), while the phoenix app itself has additional (other) stuff to do.

由于前端开发人员每次都会自动生成SPA，因此我高度要避免修改全新的index.html文件.从性能角度来看，最好仅将这些SPA用作它们的静态文件-它们在用户浏览器中自行初始化.

Because the Frontend-Developers auto-generate the SPA everytime, modifying the ever-new index.html file is something I highly want to avoid. Performance-wise it would be the best to just serve these SPAs as the static files they are - they initialize on their own inside the user's browser.

我希望这可以澄清我为什么这样做.

I hope this adds some clarification why I do this.

我现在有一个可行的解决方案，请参阅我为演示目的而创建的示例存储库: https://github.com/Anonyfox/Phoenix-Example-Multiple-SPA-Frontends

I have a working solution now, see the example repo I created for demonstration purposes: https://github.com/Anonyfox/Phoenix-Example-Multiple-SPA-Frontends

对phoenix应用程序的必要修改:

Necessary modifications to the phoenix app:

• 修改endpoint.ex'Plug.Static以包括SPA及其资产.
• 重新启动 mix phoenix.server！

• modify endpoint.ex' Plug.Static to include the SPAs and their assets.
• restart mix phoenix.server after this!

对ember.js应用程序的必要修改:

Neccessary modifications to the ember.js apps:

• 将"output-path": "../../web/static/assets/*my_app*/"添加到.ember-cli，方便设置以始终使用此路径运行ember build
• 将baseURL: '/*my_app*/'和locationType: 'none'添加到config/environment.js
• rm -rf .git如果要在一个项目中对所有代码进行版本控制(此问题的目的)

• add "output-path": "../../web/static/assets/*my_app*/" to .ember-cli, convenience setting to run ember build always with this path
• add baseURL: '/*my_app*/' and locationType: 'none' to config/environment.js
• rm -rf .git if you want to have all the code versioned within a single project (the purpose of this question)

推荐答案

您的设置应该可以正常工作.只有一个警告:每次在lib中进行更改时，都必须重新启动应用程序.

Your setup should just work. There is only one caveat: every time you change something in lib, you must restart your application.

根据请求重新加载代码的唯一目录是web.实际上，这是lib和web目录之间的唯一区别.这就是为什么您将运行时间较长的进程和主管放在lib中的原因，因为无需重新加载它们的代码，而其他所有内容都在web中.

The only directory that is code reloaded on requests is web. In fact, that's the only difference between lib and web directories. That's why you put long running processes and supervisor in lib, because there is no need to code reload them, and everything else goes in web.

这篇关于Phoenix App中的预编译单页应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！