I have created a bundle. However its not working when deployed to production server. I am running MVC4 RC
My bundle looks like
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/core").Include("~/Scripts/min/jquery-1.*",
"~/Scripts/min/core.js",
"~/Scripts/min/business-signup.js",
"~/Scripts/min/slider.js",
"~/Scripts/min/label-text.js",
"~/Scripts/min/consumer-account.js",
"~/Scripts/min/modernizr-2*"));
bundles.Add(new StyleBundle("~/Content/min/css").Include(
"~/Content/min/core.css",
"~/Content/min/layout.css",
"~/Content/min/reset.css",
"~/Content/min/sprite.css",
"~/Content/min/pricing.css",
"~/Content/min/homepage-slider.css",
"~/Content/min/transactions.css"));
}
From my layout I call the bundles like
#Styles.Render("~/Content/min/css","~/Content/min/css")
#Scripts.Render("~/bundles/core")
However there is no minifaction or bundling happening. Instead a single request is made for each of the items within the the bundles.
I know the server is working correctly as I have another site running on the same server and the bundling is working ok.
Can anyone see something obvious to what I am doing wrong?
Make sure you are running in Release mode (debug="false" in your web.config). Also notice that there is a bug in the RC that prevents of properly caching the resources server side and thus increasing the CPU usage of your site everytime a request is made to the url that is supposed to serve the bundled and minified version of your resources.
Related
We have a node.js app bundled for production using Webpack.
Our problem is how to add dynamic configuration after you already have a bundle, without the need to re-bundle?
On the server-side, we can just use node env variables, but how can this be done for the client bundle? Specifically, we need to tell a browser module to which api server address to connect.
Having a js/json file with the configurations causes the configuration values to be injected into the bundle, and therefore can't be changed afterwards (in a comfortable manner, without open the bundle file and manually finding and replacing).
Using something like express-expose, isn't something we want, since it causes another network request to get the data, and our server address is dynamic.
node-config etc., don't work on client side
You can make creative use of the externals option:
externals: [
{ appConfig: 'var appConfig' },
],
If you add that to your configuration you can just let your web server add a script tag with var appConfig = {"config":"value"}; somewhere before the loading of your webpack bundle, and a simple require('appConfig') will pick it up.
I have a website made in Umbraco connected to Visual Studio 2012. When I start the project (F5) it looks like it should with CSS and jQuery. In this project we use bundles.
When I publish my website, the bundles can't be found.
"Failed to load resource: the server responded with a status of 404 (Not Found) http://mywebsite.local/bundles/styles" When I look in the console (on my browser) I can find the folder bundles, and the file style. But it is empty.
But on the local site, there is CSS in the style file.
What am I doing wrong? I mean, it's the same code? It's like somewhere on the way half of my code just disappears. I'm also using Optimus as a package to Umbraco, but it doesn't seem to make any difference.
Here's my BundleConfig:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/custom/css").Include(
"~/css/MasterStyle.css",
"~/css/TopMenu.css",
"~/css/SmallImages.css",
"~/css/SideMenu.css",
"~/css/Footer.css",
"~/css/Support.css",
"~/css/Highlight.css"));
bundles.Add(new ScriptBundle("~/bundles/js/jquery").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap/js").Include(
"~/scripts/bootstrap.js"
));
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/scripts/TopMenu.js",
"~/scripts/Master.js"));
LogHelper.Info<string>("Bundles Loaded");
//Comment this out to control this setting via web.config compilation debug attribute
BundleTable.EnableOptimizations = true;
}
My Global.Asax (I have not written this, and definitely not sure if this is correct)
<script runat="server">
void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
</script>
UPDATE:
Check the correct marked answer, I solved it by following that tutorial and used the code that was posted in the answer. I also noticed a minor error in my bundle.config (that I had checked before so that wasn't the main problem).
In my "bundles.Add(new StyleBundle("~/bundles/custom/css")" I have wrong path, for me it should be "~/bundles/styles" instead. And the combination of all this, made it work!
Assuming you're using Umbraco 6 or 7, you could follow the gist here: How to use ASP.NET Bundling and Minifications in Umbraco
However, you should use an ApplicationEventHandler derived class so that you can register them on startup instead of trying to create your own Global.asax.cs class (this is now the recommended way of doing this sort of thing with Umbraco):
public class ArticleEventHandler : Umbraco.Core.ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
An alternative to Bundling is to use the ClientDependency package that comes bundled with Umbraco. I can elaborate on that if you need me to, however there are plenty of examples and documentation on that out there.
I am deploying a meteor application to a digital ocean droplet with meteor upload. Everything goes well, the application gets deployed, database works, seeding of data works etc. But there is one problem i can't seem to be able to solve.
I use the meteor-uploads package (https://github.com/tomitrescak/meteor-uploads) for file uploads. Locally everything goes well, the file gets uploaded, finished callback gets called etc. But once I have deployed the application to the server it keeps giving me on of these errors, :
POST http://*ip*/upload net::ERR_CONNECTION_REFUSED
POST http://*ip*/upload net::ERR_EMPTY_RESPONSE
POST http://*ip*/upload net::ERR_CONNECTION_RESET
Any ideas are welcome, I have searched all over for a solution but none seems to fit my problem. I also installed to a fresh droplet but that didn't help. In none of my browsers (Mac Chrome, safari & firefox) does it work, on my phone (Android 5.0) I get the same errors. I am using the newest Meteor version 1.1.0.1
On local host you don't need to set the environmental variables, but the host services provides you should.
Check this tutorial to see how to put the environment variables.
Because the file-upload needs a startup-server-configuration, like this.
//file:/server/init.js
Meteor.startup(function () {
UploadServer.init({
tmpDir: process.env.PWD + '/.uploads/tmp',
uploadDir: process.env.PWD + '/.uploads/',
checkCreateDirectories: true //create the directories for you
})
});
But im not sure if putting this on a startup will work on digital ocean, like i say you you enter it, run printing and check if the /.uploads/ exists
I'm trying to use the node-config module to change some parameters of my configuration (basically logging level) during runtime.
In the official documentation says:
Environment variables can be used to override file configurations. Any environment variable that starts with $CONFIG_ is set into the CONFIG object.
I've checked that this is true when the server starts but it does not seem to work once it's up. (The handler of the watch function is never called when an environment variable is changed unlike a change in the runtime.json file or directly changing a config variable).
I'm currently watching the whole CONFIG object like this:
var CONFIG = require('config');
CONFIG.watch( CONFIG , null , function(object, propertyName, priorValue, newValue){
console.log("Configuration change detected");
});
Does anyone know if this is possible?
The environment is available during startup of a process.
If the process is running, you won't be able to change the environment anymore, the process is in.
The only option is to restart the process or use other mechanisms to communicate with it.
Say for example having a rest or tcp listener inside, where you can transfer your variable inside.
Best regards
Robert
As you must knowing, React is a single page application which is eventually when it is complied is a static page app that means all the files of the react application is complied into vanilla JS and CSS file bundle in a Tarball. Now that Tarball is eventually deployed on a web server. It could be Apache web server, nginx web server or anything which you are using it but an important point is the static app is running in someone else browser and someone access to website CSS and JS are downloaded in a browser and it is running in the browser runtime environment so technically you cannot have a runtime environment variable for someone else browser but may be there would be a way to access them during runtime.
SOLUTION
I have achieved this goal with the package called runtime-cra.
follow the steps on this official documentation: https://blog.risingstack.com/create-react-app-runtime-env-cra/
I am working on an AngularJS application that is delivered by a SocketStream/node.js server.
I have an AngularJS service that calls api functions on the SocketStream server and progress has been good so far.
But now the time has come to start writing the first tests and the first testing framework that came to mind is Karma/Jasmine, since this is the recommend AngularJS set up.
So far so good, but since my AngularJS modules are imported using 'require' (SocketStream's version, not require.js) and server api calls are part of the test, I need to configure Karma to load SocketStream (at least its client side).
I took a good look at 'https://github.com/yiwang/angular-phonecat-livescript-socketstream' but when I run this example I get run time errors, possibly because I have later versions of variuous dependencies installed.
I managed to get 'required' resolved by packing my SocketStream app by adding 'ss.client.packAssets()' to app.js and run 'SS_PACK=1 node app.js', but when I start karma it logs an error message saying:
'Chrome 23.0 (Linux) ERROR
Uncaught TypeError: undefined is not a function
at /the...path/client/static/assets/app/1368026081351.js:25'
'1368026081351.js' is the SocketStream packed assets file. If I don't load it the error message is something like 'require is undefined', so my best guess is that the error is happening somewhere inside the SocketStream require code. Also because I run karma in DEBUG mode and can see all the files being served.
I have been trying different approaches as to find out what is happening but to now avail. So my questions are:
Is anybody else successfully testing AngularJS/SocketStream using Karma?
Does anybody have any suggestions as to how I can fix, or at least debug this problem?
Are there any alternatives/better solutions?
Time to answer, sort of, my own question:
Sort of, because I came to the conclusion that Karma and node.js/SocketStream have a lot of overlap, so I decided to see if I can omit Karma altogether and deliver the Jasmine testing platform through SocketStream. It turns out that that is possible and here's how I did it:
I defined a new SocketStream route and client in my 'app.js' file:
ss.client.define( 'test', {
view: 'SpecRunner.html',
css: ['libs/test'],
code: ['libs', 'tests', 'app'],
tmpl: 'none'
});
ss.http.route( '/test', function(req, res) {
res.serveClient( 'test' );
});
I downloaded jasmine-standalone-1.3.1.zip and copied 'SpecRunner.html' to the 'client/views' folder. I then edited it to make it load AngularJS and all SocketStream client files, like all other views:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<SocketStream/>
I removed the 'script' tags that import the sample source files ( 'Player.js' and 'Song.js' ) and specs but let the last 'script' block in place unmodified.
I then created a new folder inside 'client/css/libs' called 'test' and copied 'jasmine.css' in there unmodified.
Then I copied 'jasmine.js' and 'jasmine-html.js' renamed to '01-jasmine.js' and '02-jasmine-html.js' but otherwise unmodified, into '/client/code/libs'.
Now Jasmine is in place and will be invoked by using the '/test' route. The slightly unsatisfactory bit is that I haven't found an elegant place to store my spec files. They only work so far if I place them inside the 'libs' folder. Anywhere else and they are served by SocketStream as modules and are not run.
But I can live with that for now. I can run Jasmine tests without having to configure a special Karma setup.