I'm working within an ASP.NET MVC 4 project. I'd like to use browser-sync to inject changes to markup in our razor syntax views without reloading the page.
I'm using Gulp to automate these browser-sync tasks and the html-injector module (https://github.com/shakyshane/html-injector) to inject html changes.
My goal is:
Run ASP.NET project.
Run Gulp with browsersync task.
Navigate to view A.
Make a change in view A's cshtml file.
See the change in view A without a page reload.
Here is my gulp task:
var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var htmlInjector = require("bs-html-injector");
gulp.task("browserSync", function() {
browserSync.use(htmlInjector, {
files: ['**/*.*html']
});
browserSync.init({
proxy: 'localhost:1234',
files: ['Styles*/**/*.css']
});
});
I'm proxying to port port 1234 because the ASP.NET project runs there.
This configuration works perfectly for plane *.html files. The changes are made in-place with no page reload necessary.
However, for *.cshtml files, it still does a complete page reload every time.
Has anybody managed to make this work? Or is it an inherent ASP.NET/Razor thing that the view must be completely regenerated for every change?
Thanks in advance.
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
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.sendFile('main.html', { root : __dirname})
});
app.listen(9000, function(){
console.log('Listening on port 9000');
});
This current block of code works fine. Express is required and assigned to the variable app.
A HTML file is then sent (from the same directory) using res.sendFile as part of the app.get method.
Within the HTML file I am referencing a css file in the same directory, yet nothing is happening.
<link rel='stylesheet' type='text/css' href='mainstyle.css'>
How am I able to send the CSS file to the browser for use? res.sendFile does not work.
Thanks.
You need to define a static files directory. Create a folder called public and then include this line:
app.use(express.static('public'));
Don't include public in the file path when you include the css file though. All of your static files can go in that folder. Or, better still, create sub-folders for styles, images, fonts etc.
You can read more about it here: https://expressjs.com/en/starter/static-files.html
I think the problem you're having is that you're trying to create a web application from scratch using Express without any of the surrounding functionality. Your app sends a file when you navigate to the URL. It does not listen for specific requests for files and respond to them, it does not handle missing files, server errors etc.
You could do all that from scratch but in fact Express have created an application generator which creates a skeleton app for you with the web server, public folder, routes etc. It's called Express Generator and you can find it here: https://expressjs.com/en/starter/generator.html
That's a brilliant starting point for an MVC application. You get the package.json file for additional node modules, a template engine called Jade (although I prefer Hogan) for dynamic content and once it's created your app, you can fire it up by typing "npm start" in a console window.
try this
var express = require('express');
var app = express();
app.get('/', function(req, res) {
if(req.url == "/" || req.url == "/main.html"){
res.sendFile('/main.html', { root : __dirname})
}else if(req.url == "/mainstyle.css"){
res.sendFile('mainstyle.css', { root : __dirname})
}
});
app.listen(9000, function(){
console.log('Listening on port 9000');
});
I'm now aware of what was going wrong.
From the instance I started, I was experimenting with different code. The browser than created cache based on the incorrect code my server was providing, so no matter what I changed, the browser was reffering to it's cache to load, in this case, erroneous code.
For everyone who may be experiancing with similar issues when entering the correct code, clear cache history or use a incognito/private browser for developing.
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.
I am using Meteor 1.0.2.1 and iron:router 1.0.7. I have managed to set up a route for '/' which works fine locally however when I deploy on meteor I get the iron:router splash.
Here is my route:
Router.route('/', {name: 'landing.index'});
and I have a controller called LandingIndex and a template called LandingIndex as well.
Any help is greatly appreciated.
edit:
The controllers looks as follows:
LandingIndexController = RouteController.extend({
waitOn: function () {
},
data: function () {
},
action: function () {
this.render();
}
});
In my case I had duplicate templates. A quick look at the console pointed out the problem.
Are you by any chance using Twitter Bootstrap? I ran into this same problem today, non-reproducible on localhost as well. After way too many hours of trying to reproduce this on a remote env with meteor deploy xxxxx.meteor.com, I figured out that it was because of a file contained within Twitter Bootstrap. If you straight up download the .zip file of bootstrap and indiscriminately copy its 3 directories into your project (css/ fonts/ js/), js/npm.js will be copied along with it.
I think js/npm.js is only needed during the build process with Grunt, so I just deleted it. It solved the issue for me, although I'm not sure why...
For me the problem was some files that came from another branch and stayed "untracked" in Git, so I overlook them.
But it looks like mup deploys everything, so it deployed this incorrect files too. In addition to that, Iron Router must be catching exceptions from other stuff, so it showed its splash page.
Just removed the untracked files and the problem was solved with another deploy!
I've got a simple ASP.NET MVC application for CSV file validation. The user enters some characteristics about the file (text box and some checkboxes), then browses to the file they want to upload and hits submit. The entire application works fine on my local machine and also on an internal web server, but does not work when placed in the external hosting environment. Below are the details.
Originally the file contents on my machine were copied out to the server. This means that bundling of the CSS and JS was not enabled. The application page would render just fine and the submit would also work. However, after submitting the file, the application root changes.
I've been checking the application root with the following code places inside the view.
var applicationpath = '#Url.Content("~/")';
The path is correctly output as something like the following when it's rendered for the first time.
var applicationpath = '/folder1/folder2/folder3/appfolder/';
After submitting the file, it changes to.
var applicationpath = '/folder1/folder2/folder3/';
I've checked with the hosting provider and they've got the application set up on "appfolder" and "folder3" is just a directory in IIS and not set up as an application.
The form in the MVC view is set up to post in the following way.
#using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "wizard" }))
Since the path changes, this obviously messes up any #Url.Action,#Html.ActionLink, and other Razor methods that are supposed to automatically map to the root. The odd thing is that the CSS and JS files continue to be mapped in the rendered output.
After all of that, I decided to try to Publish the application through Visual Studio to a local file folder and then copy the results out to the hosting provider. This enabled bundling for the CSS and JS files. Now when I go to the root of the application, none of the CSS or JS is pulled down. I've tried grabbing the path to the bundled JS or CSS files and putting that in the browser, but I get a 404 error. The rendered output looks like this:
<link href="/folder1/folder2/folder3/appfolder/Content/css?v=J7SZFaeCsOxTbb847HlSpnWlcb1lMDolldSj5wq-hdc1" rel="stylesheet"/>
Needless to say, I'm at a loss. I've asked the hosting provider to tell me what IIS features they have installed and they have. See below.
IIS Features 1
IIS Features 2
The 3rd party was able to give me RDP access to the server. I turns out that they were using URL Rewrite in IIS and some of the rules were interfering with the MVC application. After they disabled the rules for the application folder, everything worked as it should.