I've been playing with Angular yeoman generator. Very nice configuration I have to say. Everything looks great except one thing. Although in local (grunt serve) the external html templates of the directives play perfectly fine, when I make the build and run it on the server, the html templates (files) associated with directives are missing! (everything else plays perfectly fine).
for example, the template in the directive defined as
templateUrl: '../../views/usernavmenu.html',
in dev mode it's all fine, but in dist (live) the file is not concatenated and built in the js (as it is happening with the controller related views). Browser requests /views/usernavmenu.html which as such results in 404.
Expected behaviour would be for grunt tasks to build the template in the js file as it does for all other views.
Anyone with similar issue? Any ideas?
Here is the gruntfile
Solved it by changing the templateUrl
templateUrl: 'views/usernavmenu.html',
just to save time for anyone else who might be looking :)
Related
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
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.
So I compiled my SASS into one CSS file using codekit 2 on their own localhost and the website looks perfectly fine.
However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the SASS from my server leaving the compiles CSS it looses my fonts as well.
Does anyone know why is this?
Here is the website: http://bubbacue.nathanpatton.co.uk/
And the GitHub Repo for all the files: https://github.com/NathanPatton/Bubbacue
Your web host is generating a bunch of 403 Forbidden and 404 Not Found errors on the assets.
In Chrome, go to View, Developer, JavaScript Console and you'll see a list of the problem files and directories. Here is how to fix it.
I have build MVC 5 application which works fine when running via VS. When I publish it to the server first time it also works. Now I have made few correction to my css file and publish whole project again but website still see the old css file. I have removed all files from the server and tried few more times but it is still the same. When I check the css file on the server, the changes are inside the file.
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
<link href="/Content/cssmain?v=Ikj7NnMg3q9kTHR7ynWOJDQFGMZl3mtVMi_2EkOJxc41" rel="stylesheet"/>
How can I force VS to minificate my css file again?
I've tried cleaning, rebuilding but no luck
Edit:
My bundle set up look like below and all files are located on the server in Content folder.
bundles.Add(new StyleBundle("~/Content/cssmain").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ilightbox.css",
"~/Content/bannerscollection_zoominout.css"));
Many thanks
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
CDN location? External Css lib (yours or 3rd party)? unsure what you meant by "not located on server"?
Yup, it does (look like ASP.net Bundling in action) - check your Global.asax, App_Start/BundleConfig or _AppStart and see if the bundle configuration setup point to/reference the "correct" locations for your css (and or script).
Is it just you experiencing getting the old css file loaded? Or anyone who views the site?
While building large applications with meteor, we do face the regular problem of editing the stylesheets files. Once a file is edited, the whole application reloads which takes time each time a little change is made. A large project implicitly implies complex css files. For this reason I chosen to use the sass in order to structure them and be more efficient in the development processing. What I'm looking for is a workflow where I can change the .scss files in an editor and watch the result in real time in my meteor app.
Here is what you need (it looks fastidious but do not be afraid, it worth it):
Setup your project to externalise .css files
Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
Create a public folder in the root of your meteor project: meteorProject/public
Add a css file into this folder: meteorProject/public/style.css
Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />
What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.
Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.
Editing .scss files in realtime with meteor:
To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana
That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor.
To setup the meteor project with takana just do the following:
open the terminal
sudo npm install -g takana (enter your password if requested)
start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>
You are all set, now to use it
Start your meteor project in a second terminal. command meteor from the right path…
Open any browser to your meteor page i.e. probably http://localhost:3000
Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.
Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.
Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.