May i know does iron router async load templates from server only when required or download everything in bundle at first page load.
Meteor compiles all of your template code into javascript which is then shipped to the client in a single file in production, or in multiple files in development mode. Those files are then downloaded and interpreted on the first page load (or whenever there is a hot code push). There is currently no notion of incremental loading, however it is on the roadmap.
Related
I'm new to Next.js and am trying to get my head around client side and server side routing and what files need to be made available to download when Next.js is configured to use server-side rendering.
When I do a production build of a Next.js project, a .next directory is created (details here). When I call next start and then load a page that uses SSR (by defining getServerSideProps()) then I can see in the developer console that the page that I load downloads resources that are prefixed _next (e.g. <script src="/_next/static/chunks/main-3123a443c688934f.js" defer=""></script>).
Can someone confirm whether the .next directory contents (.next/server/**, .next/static/**) are just made available on the server by being renamed to _next?
I tried creating a new page in a file called _next.js as an experiment. The project builds correctly (no errors reported and there are build artifacts created with the same naming convention as the other pages). However, when I try to load that page, I get a 404.
Are there restrictions on what constitutes a validly named page in Next.js? If so, what are they and where is this defined.
How does the Next.js server know what is a static resource that should just be given to the client and what is a page for which Next.js should render an output? Is it simply an algorithm like "if the path starts _next/ then return what is requested, otherwise render?"
How does Next.js know to distinguish between resources that are in the public directory and pages? e.g. if there's a collision between the name of a page and a resource in the public folder, how does the server know what to return to the user?
I am in the process of adding a Content Security Policy for a laravel application. While downloading external css and font styles to the local assets I have run into some odd template behavior.
I wanted to test that the paths to the newly downloaded libraries were correct, but when I change the name of files I downloaded and refresh, even with the browser cache disabled, it is still referencing the old location successfully. If you try to access the file in the old location directly by file path it fails (because it no longer exists).
Even more strangely, if I pull the code down to another computer and run it (I have not added the new libraries to git yet), the page still seems to think it correctly loaded that resource.
I tried clearing the following directories:
storage/framework/cache
storage/framework/sessions
storage/framework/views
and running the code again - on multiple computers, and it still reports that it is loading these files that are no longer there?
Does Laravel or commonly used front end frameworks with it store compiled templates somewhere else? I am completely perplexed...
i have a question regarding flow router on meteor.
in the new project structure for meteor, all files are suggested to be kept in the "imports folder" and be imported to either the server folder or client folder. in the tutorials i have seen that use flow router, there was no imports folder and the routes folder with the js file in it was kept right under the project folder. that raises a few questions for me.
where does the flow router code run? on the client? on the server? on both?
if it runs on both, should i leave it outside the imports folder?
if it runs on both/only on the client, what does that mean security-wise? say i don't want a certain user to be able to access a certain page, so in the flow-router action() i write a code that prevents people from reaching where i don't want them, can't they just change this code on the client and bypass the wall?
when referring to a user on the flow-router js file, do i use Meteor.userId() or this.userId?.
i have three functions written inside if(Meteor.isClient) which i copied from a tutorial. the functions are Accounts.onLogin, Accounts.onLogout, FlowRouter.tringgers.enter.
can a user hack through them since they are on the client?
thanks in advance!
From the documentation:
Flow Router is a client side router and it does not have Server Side Routing capability. It has no plans to implement such features either.
so Flow Router runs on the client only and you should put the related code in /imports/startup/client
See (1). Generally, all your code should be placed in the imports directory.
Meteor ensures that any file in any directory named server/ will only be available on the server, and likewise for files in any directory named client/
So if you want to have some code accessible to both the client and the server don't place it in any subdirectories named /client or /server.
Although previously, with Iron Router, authentication was done in the router layer, with Flow Router you should write the auth logic in the template/component layer. Writing code in the flow router action() that prevents users from accessing a page is not a good pattern, according to the creator of Flow Router. Read here for examples and more details.
In server-rendered apps(in the PHP era), if there is an unauthorized access, we can redirect the user to a login page or some other page. In Meteor, or in any single-page app, we can simply show a login screen to the user instead of redirecting them to another page. Or else, we can simply say: "You are not allowed to view this page."
Same as in (3). You shouldn't refer to a user in the router layer.
Any code that runs on the client is not safe from a malicious user.
You may find the following useful:
Meteor guide application structure
Routing Guide for Meteor Apps (with Flow Router)
The example app "Todos", written following the Meteor Guide
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.
Is there a way to prevent automatic loading of all assets in my /client folder?
I am looking at a scenario where my login page uses different css/js files than my registration or view users folders. What is the best way to do this?
The closest I have come to a solution is this but that still doesn't solve my problem.
Or the best approach is to host my files externally then user the external-file-loader with conditional statements?
I have just published modules smart package which more or less does the job for you. You can add it to your project with
mrt add modules
Then, you will need to change the extensions of all files that you want to load asynchronously to .module_js or .module_html (currentlly we do not support css). Now suppose that the structure of your directory is more or less
modules
module1
file1.module_js
file2.module_js
module2
file1.module_js
file2.module_js
client
main.js
server
public
...
Initially only main.js will be present in your application. To load additional code for the client use the asynchronous require call:
require('module1', function () {
console.log('the files contained in module1 folder are now loaded');
});