Precompiled Single-Page-Apps in Phoenix App - single-page-application

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.
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:
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
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?
EDIT:
The basic workflow I try to implement is the following:
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.
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.
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.
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.
EDIT 2:
I have a working solution now, see the example repo I created for demonstration purposes: https://github.com/Anonyfox/Phoenix-Example-Multiple-SPA-Frontends
Necessary modifications to the phoenix app:
modify endpoint.ex' Plug.Static to include the SPAs and their assets.
restart mix phoenix.server after this!
Neccessary modifications to the ember.js apps:
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)

Your setup should just work. There is only one caveat: every time you change something in lib, you must restart your application.
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.

I think easiest way to replace web/templates/layout/app.html.eex with your index html and change assets path inside with <%= static_path(#conn, "/js/app.js") %> helpers to grab your ember app js file from static folder.
Router part:
scope "/", Chat do
pipe_through :browser
get "/", PageController, :index
end
And inside action render conn.

Related

Vercel host: Next.js site not serving my static files

I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls

Grunt-angular-templates - Don't compile html templates into single JS File

I've created a basic angular project using yeoman's angular generator. While the standard Grunt process is fine in general, I do have my concerns with the way how the views get all minified into the same JS File.
If I have about 10 views on my Page, the requested view can't be seen until 'all' pages have been loaded, since their all in the same file.
I now want to modify the Grunt process, so that each HTMLviewfile get minified into its own file in a views directory. The main angular router should now request the view files as they are requested by the client (user).
Is there any way you could help me. All my research has resulted that the module 'grunt-angular-templates' is responsible for minification of all HTML views. I've yet to find out, how to keep the files from getting merged into a single file.
Thanks!
I found out, that in order to not minify all the view files into the script.js file, you have to remove the ngtemplate process from you gunt build task

How do I get the ASP.NET content relative path

Doing a project between multiple people, and a few components (web app, services app and some others). We will be storing some information inside the Content folder of the web app so it can be accessed directly from the web server with an href, however other components outside of the web app need to access this folder as well, and since we are sharing the project between multiple people using an absolute path is not an option. What options do we have?
EDIT: Trying to explain it a little better.
What i have exactly is, a web project, a "data project" which is just a dll, a "logic" project which is another dll and a services project which is an exe/service.
Both the web project and service project consumes the methods from the logic, and the logic from the data project. Being the last one the responsable for storing data (in a database) and also in the file system.
This "filesystem" path should be configurable, and we are aiming to put it into the content folder of the web project so multimedia files can be accessed directly rather than doing a byte stream.
Now in the web.config(config file of the web app), and app.config(config file of the services app) i could set the absolute path to web/content (the same for both config files) and the data dll would use it without problems. Now the main problem is that we cannot put an absolute path in the config file because each person works on a different computer with obviously different file paths. So if i could just write something like: ~/project/Web/Content rather than C:/myfolder/stuff/blabla/project/web/content in the config files, with ~ resolving the path to the project, this is what i want! Or maybe better ideas about how to share a folder with these apps without adding absolute paths hardcoded somewhere.
What you want to use is:
Server.MapPath("/Content/filepath.ext");
This will give you the absolute path of a file based on it's position within the website, in this case, from the /Content directory.
For a program external to the website, you have a couple options;
The easiest to implement might be a simple configuration value in the external program which points to the directory. My guess is you've already decided that's not ideal, but it may be the quickest way.
Alternatively, there's a Microsoft .NET assembly which gives you easy access to IIS information (I can't recall its name off the top of my head!). You could use this assembly to find the appropriate website, and retrieve its root directory. I'll see if I can find it and get an example, or maybe someone else will see this and post an answer with that information.
Please check the following method "ResolveClientUrl"
MSDN
Use the ResolveClientUrl method to return a URL string suitable for use by the client to access resources on the Web server, such as image files, links to additional pages, and so on.
http://msdn.microsoft.com/en-us/library/system.web.ui.control.resolveclienturl.aspx

My haml view is unable to find the css file in my public/css folder when deployed, but manages to find it on localhost

My application is running on Sinatra and deployed on my Apache web server using Passenger. My directory structure is as follows:
approot
` public
` css
- bootstrap.css
` uploads
- empty.txt
` tmp
- restart.txt
` views
- success.haml
- upload.haml
- config.ru
- myapp.rb
Inside upload.haml
%link(rel="stylesheet" href="css/bootstrap.css")
When I run this application on localhost:4567, the CSS loads just fine. However, when I deploy it on my web server, the CSS doesn't load.
On my web server, the application is accessed using: rubyapps.mydomain.com/appname
And if I type: rubyapps.mydomain.com/appname/css/bootstrap.css, I am able to see the contents of my CSS file just fine.
Totally confused, and not getting how Sinatra handles this situation, looking for a little help.
You might be running into the need to use Sinatra's URL helper.
For generating URLs you should use the url helper method, for instance, in Haml:
%a{:href => url('/foo')} foo
It takes reverse proxies and Rack routers into account, if present.
This method is also aliased to to (see below for an example).
Maybe this?
%link(rel="stylesheet" href="../public/css/bootstrap.css")
Or...
%link(rel="stylesheet" href="/css/bootstrap.css")

multiversioned sub application asset paths in flex 4

Hopefully someone can help here, more or less looking for a) solution to relative paths or b) insight on another method of loading assets.
We have a standalone web application that is using SDK 4.1 and looks in its relative assets folder for all images and external swfs to be loaded.
on the server, this is the absolute path of the assets directory:
/ApplicationRoot/versionFldr/controls/assets/*
the application uses relative paths in all cases of loading an asset.. and this is continously being added to and updated as we advance versions of the app.
So, in essence, the app is looking for:
assets/*
now forward to the NEW application, lets call it "ParentApp" and the above application "ChildApp".
Parent App is in a different server directory than ChildApp
/ParentApp/version/controls/ParentApp.swf
/ChildApp/version/controls/ChildApp.swf
now, when ChildApp loads into ParentApp, it assumes that it is in the same directory that it's always been in. So, it looks for assets/* and cant find them because
/ParentApp/version/controls/assets/* != /ChildApp/version/controls/assets/*
I need to find a solution to have ChildApp look in an absolute path for ALL loaded assets when it is a child of ParentApp and have it look in paths relative to itself when it is standalone.
The caveats I have are that images are loaded into various controls, caches, and even mx:Text fields (html text with tags). I'm trying to avoid having to globally replace all path links across the application and having to create new coding procedures when new assets are created for the app. ChildApp is in production and has to stay on the 4.1 SDK.
ParentApp is new and has much more flexibility.
I've tried -source-path and -library-path compiler options in childApp, but this lead to compile errors and I have not been able to proceed.
Thank you in advance for any insight and help!
-AJ
I would solve this by having a "baseURL" variable in the child app. Give it a default value so that you can form the usual relative URL's that you are using: `var baseURL:String = "/assets/";
Unfortunately, you then have to modify every asset path in the child app so the path to the assets is something like: baseURL + assetFileName
When the child app is loaded into the parent app, you then give this baseURL variable a non-relative path. Ideally, you do that early in the process, before the child app tries to load any assets.

Resources