Subscribe: Jeffry Houser's Blog
http://www.jeffryhouser.com/rss.cfm?mode=full
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
angular  applications gulp  applications  building angular  building  cast  coldfusion  gulp  part part  part  replace  settings  xml 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Jeffry Houser's Blog

Jeffry Houser's Blog



Jeffry Houser's Blog



Published: Sat, 24 Jun 2017 01:06:24 -0600

Last Build Date: Tue, 20 Jun 2017 09:00:00 -0600

 



Why does reloading my Angular 2 App return a 404 error?

Tue, 20 Jun 2017 09:00:00 -0600

I've been having some issues with Angular 2 [now Angular 4] and the RouterModule. I put together this screencast to demonstrate the problem and how I fixed it: width="560" height="315" src="https://www.youtube.com/embed/dlPwcNcMv04" frameborder="0" allowfullscreen>



How do I move ColdFusion Configuration to Another machine without Exporting Settings?

Tue, 13 Jun 2017 09:00:00 -0600

I've written in the past about migrating ColdFusion instances from one machine to another. Most of the time when I have to do this it is because of a hardware failure and I'm setting up a machine from scratch. This seems to happen every 4-6 years. Despite it's impending immediate death, 20 years running, I still do a quite bit of ColdFusion development. It's the devil that I know on the server side. Without a working machine, I can't sign into the CF Administrator and export CF Admin settings, so I have to go to other methods to get my config up and running. I've written about similar experiences with ColdFusion 8 and migrating from ColdFusion 8 to 9. But, time moves on and most of my production clients use CF10, so that is the version I have installed on my local. How do I get the old CF configuration set up the new machine when all I have access to is the old CF installation directory? this is how I did it. Install Apache: ColdFusion is useless without a web server, so first I installed and configured the Apache web server. Install ColdFusion 10: Get ColdFusion 10 from the cfmlRepo site. More specifically, go here. be sure to download app the patches. And send thanks to whomever takes care of that site. Install CF Hotfixes: Next, install all the ColdFusion hotfixes. You'll have to install the first few manually before you can use the update feature inside the ColdFusion administrator. Uses these instructions, but basically do this: C:\ColdFusion10\jre\bin\java -jar hotfix_008.jar I installed hotfixes 7-13. The rest I updated through the ColdFusion administrator. Compare Directories: Now compare your old ColdFusion install directory to the new ColdFusion install directory. You'll be surprised at how many of the files will be flagged as identical. Those aren't the ones you need to worry about. I focused on the config files in cfusion\lib\*.xml, and copied them over from the old directory to the new one. These are the configurations I moved: new-cron.xml: Not sure what this one is for. neo-datasource.xml: this file contains DSN configuration information. neo-debug.xml: This contains CF Debugging settings. neo-logging: This contains log related settings. neo-mail.xml: This contains mail server settings. neo-metric.xml: I couldn't figure out which settings this one contains, but I copied it anyway. neo-runtime.xml: This file contains misc settings. I was making some educated guesses here. I think Neo was the code name for ColdFusion MX, so it is funny to see the name still kicking around. Restart ColdFusion: After the restart, you should find all your CF settings restored. Change DNS Passwords: I did notice that I had to reenter the passwords for all my data sources. Overall, the process worked a lot better than I would have hoped. Keep up to date by reading DotComIt's Monthly Technical Newsletter First Name Email Address * [...]



How do I do a search and replace in SQL?

Tue, 06 Jun 2017 09:00:00 -0600

I recently upgraded this blog to run exclusively on SSL. The first thing I noticed is that many of the links and image references inside blog posts were not HTTPS and the browser would show one of those 'this page is not secure errors'. The reason that the text of my posts use absolute links instead of relative is so that they'll show up properly for those who consume the blog via RSS and read it elsewhere. I spent a few hours white boarding a bubble sort algorithm before deciding I was getting nowhere, I decided to try a Google Search for the answer. In SQL Server, which is my blog's data store, you can use a replace function to make the change. I can do a simple search for text inside a column and replace it with something else. Perfect, that is what I need. Here is a StackOverflow answer with more details. The query they recommend is: update my_table set column = replace(column,'oldstring', 'newstring') Of course, when I did that I immediate got a conversion error. The body of these posts are stored as ntext fields inside the database. and the replace() function will not work on ntext or text fields. Thankfully, there is a solution to that too. A simple cast addressed the issue. update my_table set column = cast(replace(cast(column as nvarchar(max)),'oldstring', 'newstring') as ntext) If you use BlogCFC and need to do this on one of your blogs, here is the final script I used: update tblBlogEntries set body = cast(replace(cast(body as nvarchar(max)), 'http://www.jeffryhouser.com', 'https://www.jeffryhouser.com') as ntext) where body like '%http://www.jeffryhouser.com%' update tblBlogEntries set morebody = cast (replace(cast(morebody as nvarchar(max)), 'http://www.jeffryhouser.com', 'https://www.jeffryhouser.com') as ntext) where morebody like '%http://www.jeffryhouser.com%' I hope this helps someone.
Sign up for DotComIt's Monthly Technical Newsletter



Watch For Code Changes - Building Angular 2 Applications with Gulp - Part 10

Tue, 30 May 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, [...]



Creating a Production Build - Building Angular 2 Applications with Gulp - Part 9

Tue, 23 May 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, [...]



Creating a Clean Build - Building Angular 2 Applications with Gulp - Part 8

Tue, 16 May 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, [...]



Creating a Simple Build Task - Building Angular 2 Applications with Gulp - Part 7

Tue, 09 May 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, Part 6. In previous parts of this series, we created a lot of different build tasks. One for validating the TypeScript, one for compiling the TypeScript, and a few tasks for copying JavaScript and HTML files. What if we want to run them all in one command? This article will show you how. It is pretty simple to create a Gulp task which will run multiple other Gulp tasks: gulp.task("build", ['buildTS', 'copyJSLibraries', 'copyAngularLibraries','copyHTML']); This creates a new Gulp task named build. The argument to the task is an array and each element of the array is a string which represents another Gulp task. We saw this approach with buildTS task built in Part 3. In that part, the tslint task was executed as part of the buildTS task. In this case, the build task does not have its own functionality it just combines together the existing tasks. Run this task: gulp build You'll see something like this: (image) All the tasks are run, creating a build.

What's Next?

The next part of this series will show you how to delete everything in the build directory before creating the build. I call this approach a clean build. All the information is already available, so sign up for our newsletter to start reading right away.
Get our expanded 38-page version: Building Angular 2 Applications with Gulp.



Minimizing the JavaScript Code - Building Angular 2 Applications with Gulp - Part 6

Tue, 02 May 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, Part 4, and [...]



Thoughts on Adobe's ColdFusion Roadshow in New York

Fri, 28 Apr 2017 10:00:00 -0600

Adobe had a ColdFusion Roadshow Event in New York last week and I attended. I had a moment between two projects, so I thought why not take a trip to the city and network a bit? I wanted to formalize some of my thoughts about the event in no particular order. I was personally invited by Kishore Balakrishnan, the Senior Product Marketing Manager for Adobe ColdFusion. I'm not sure why I got the invite. My software development company has been an Adobe partner in the past, but not in ages. I was part of the Adobe ACP program in the past, but am not currently a member. It could be that they just emailed everyone who had downloaded CF from their website. I'm not sure, but I also didn't ask. The even was sparsely attended, maybe 20 people tops. I did meet someone from one town over who is running a medical startup that plans to use ColdFusion. That was a treat. The event started with a presentation by Elishia Dvorak about What's new in ColdFusion 2016. My big takeaway was that they had built an API Manager tool. This is a way to manage REST APIs, whether they are built in CF or something else. This is a completely separate product from ColdFusion. I sounded to me like a proxy or entry point that could be used to manager other APIs, load balancing, documentation, and user management. I can see a benefit if you're a big company moving to a reusable service based architecture to power your organization, or a company whose business is providing services to external clients or vendors. It was an interesting approach. Since I've focused on UI Programming I don't know what else is out there that does that. If you need something like this, and are already a ColdFusion customer, it is worth checking out. Everything else new to CF was related to performance, security, and stability. Apparently when Adobe talks to customers there are the three areas of focus. I'm not surprised, though. ColdFusion is a mature technology that does what I need it to do. What is left to add? I've had trouble answering that question for 10 years. Then Kishnore got up to present about Tackling Future Challenges using ColdFusion. He started by talking about how ColdFusion success. Apparently ColdFusion is thriving. They said that each release doubles the sales of the previous release. I'm a bit surprised by the numbers. The next version of ColdFusion will be released in 2018, the only feature I can recall was a revamped version of CFScript which will offer more OO Features. And of course, more stability, better performance, and better security. All good things, but not the whiz bangy features to make new people interested. Since ColdFusion is doubling it's sales with each release that means there must be a huge demand, right? Nope! The two biggest complaints from the audience were the inability to find CF Developers and the inability to find CF Jobs. I hope those two networked with each other. My impression is that the ones who can't find CF Developers are you for beginners. The bulk of CF Devs have lots of experience with it, and no new blood is coming into the fold. Kishnore suggested that CF is easy to train people in. I agree. However, another attendee complained that it is hard to book people for CF Training courses from major training centers. The course always gets cancelled last minute because not enough people signed up. That is troublesome and won't help train up a new breed of devs. The topic of IDEs came up. A lot of people complained about CF Builder, how it is a mess, but and how they still use Dreamweaver. I have to admit this surprised me to find people are using Dreamweaver for coding? I admit that Eclipse, which is the base of CF Builder, takes a learning curve. For simple code hinting, IntelliJ has addressed my needs well. It is also worth nothing that [...]



Check out my Angular 4 Book Kickstarter

Tue, 18 Apr 2017 09:07:00 -0600

I launched a Kickstarter for an Angular 4 book. Check it out here. There are a lot of details on the Kickstarter page. I kept the price low, but that means I need a lot of backers. The full book will be released under a Creative Commons License upon completion. This is your chance to help me create a great tutorial resource for the Angular community. What are you waiting for? Back now!



Creating Source Maps - Building Angular 2 Applications with Gulp - Part 5

Tue, 11 Apr 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, and Part 4. This entry will teach you about Source Maps. With a TypeScript application, the code running in the browser is not the same as the code we wrote. It has been translated from one language, TypeScript, to another, JavaScript. When an error occurs how can we debug it? The answer is to create a source map. We can look at the source maps in the browser, to learn where we went wrong in the TypeScript code. The usual browser debugging tools, such as break points and watches, will work with source maps. Install Source Map Plugin Gulp has a source map plugin that allows us to easily create source maps. First install it: npm install --save-dev gulp-sourcemaps You'll see something like this: The plugin is now available to use within your gulp script. Generate Source Maps The first step is to load the source map plugin in your gulpfile: var sourcemaps = require('gulp-sourcemaps'); I am going to add a configuration variable for the location of the maps: var mapPath = 'maps'; I like to keep my maps separate from the generated code, but you do not have to specify a separate path if you do not prefer. Now, you can add the source map generation to the buildTS task. First, here is the task unedited: gulp.task("buildTS", ["tslint"], function() { return gulp.src(typeScriptSource) .pipe(tsProject()) .pipe(gulp.dest(destinationPath)); }); There are two steps to the source map generation. The first is to initialize the maps. We want to do this as close to the front of the chain as possible so that the map code can keep track of all the changes. Then we want to save the maps. We want to do this as close to the end of the chain as possible. This is the modified task body: return gulp.src(typeScriptSource) .pipe(sourcemaps.init()) .pipe(tsProject()) .pipe(sourcemaps.write(mapPath)) .pipe(gulp.dest(destinationPath)); The second pipe calls the init() method on the source map module. The second to last pipe saves the source maps with the write() method. Run the task: gulp buildTS You'll see this: Check the build directory: A source map was generated for each TypeScript source file. Success! Open up the app in a browser, and bring up the source in your dev tools: The chrome dev tools let us drill down into the TypeScript files, just as we had written them. They support watches and breakpoints, just as if the browser was running them directly. This is a very useful debug tool. What's Next? Te next article in this series I'll show you how to minimize the JavaScript code. Future articles will cover compiling code on the fly, and various different build techniques. You can get all this information right now by signing up for my newsletter using the form below. Do it to help you become a better Angular 2 Developer. Get our expanded 38-page version: Building Angular 2 Applications with Gulp. First Name Email Address * [...]



Copying Static Files - Building Angular 2 Applications with Gulp - Part 4

Tue, 04 Apr 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, and Part 3. This entry will show you how to use Gulp to copy files. We'll copy the Angular libraries from the node_modules directory to the build directory, HTML files from the source directory to the build directory, and JavaScript files from the source/js directory to the build directory. These can be done using Gulp directly, you will not need to install additional plugins. Copy the Angular Libraries There are a lot of required Angular libraries and we don't want to write a script for each one. Thankfully, we don't have to, as we can specify an array of glob directories to cover all the relevant libraries: var angularLibraries = [ 'core-js/client/shim.min', 'zone/dist/**', 'reflect-metadata/Reflect', 'systemjs/dist/system.src', '@angular/**/bundles/**', 'rxjs/**/*', 'angular-in-memory-web-api/bundles/in-memory-web-api.umd' ] This covers all the JavaScript libraries required for Angular 2 applications such as zonejs and the shim library. It includes the Angular library bundles and the SystemJS library. The use of globs wildcard match files make it easy to find the relevant files needed. Next, we'll need a destination path to put the libraries: var destinationPathForJSLibraries = destinationPath + '/js'; I put all the external libraries in the 'js' directory as an organizational tactic. Now the actual task: gulp.task('copyAngularLibraries', function () { gulp.src(angularLibraries, {cwd: "node_modules/**"}) .pipe(gulp.dest(destinationPathForJSLibraries)); }); The task is named copyAngularLibraries. It is simple. It takes the array as a source. The cwd flag with the src specifies the current working directory, meaning all the libraries are located in node_modules. Then the task specifies the destination path. This will copy all the required angular files from the node_modules directory to the build/js directory. Run this task: gulp copyAngularLibraries You should see results like this: You should see an updated build directory: This is the first step. Copy JS Libraries If we have any JavaScript libraries put in the src/js folder we want to copy those to the build directory. The SystemJS Configuration file is one example. The same approach from above can be used, but is even simpler since there are less directories to deal with. First, create a glob array to find the JS files: var javaScriptLibraries = [sourceRoot + 'js/**/*']; Then create the task: gulp.task('copyJSLibraries', function () { gulp.src(javaScriptLibraries) .pipe(gulp.dest(destinationPathForJSLibraries)); }); This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous section. Run the task: gulp copyJSLibraries You'll see this: Check the build directory and see the final file: The systemjs.config file was successfully copied from the src directory to the build directory. Copy HTML Files If you're using my Hello World app, it only has a single HTML file. It is likely that a full app will have more, especially if you use external HTML templates. I want to write a task copy all HTML Files from the src directory to the build directory. First, create a glob array to find the HTML files: var htmlSource = [sourceRoot + '**/*.html']; Then create the task: gulp.task('copyHTML', function () { return gulp.src(htmlSource) .pipe(gulp.dest(destinationPath)); }); This is a simple task that specifies the input source and the destination. It uses the same destination variable that was u[...]



Compiling TypeScript - Building Angular 2 Applications with Gulp - Part 3

Tue, 28 Mar 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2. This section will build a Gulp task for compiling TypeScript into JavaScript. Install Dependencies First, install a gulp plugin, gulp-typescript. Run this code: npm install --save-dev gulp-typescript You should see results like this: This makes the gulp-typescript plugin available for use in our gulpfile. Compile TypeScript to JavaScript Before we start the compilation task, let's create some variables. First, the destination path for the output files: var destinationPath = 'build'; I always put the processed files in a directory called build. Then, create an instance of the gulp-typescript module: var tsc = require("gulp-typescript"); Use the gulp-typescript library to create a project: var tsProject = tsc.createProject("tsconfig.json"); This refers to an external tsconfig.json file. I don't want to expand on the full details of the config file; but there are two important things I want to draw attention to. The first is a few items in the compilerOptions: "compilerOptions": { "target": "es5", "module": "commonjs", } The module type is 'commonjs' which is the module type used behind the scenes by Angular 2. The second important thing here is the target, es5. This stands for EcmaScript 5; JavaScript is an implementation of and most browsers support. The second important item in the config file is: "exclude": [ "node_modules" ] The exclude option tells the type script project not to process files in the node_modules directory. In essence, it ignores all the Angular libraries installed via NodeJS. These libraries already come with compiled bundles. We'll deal with moving those later. Now, create a buildTS task: gulp.task("buildTS", ["tslint"], function() { }); This gulp task is named BuildTS. Before this task is run; the tslint task will execute. The tslint task was created in the previous part of this series. The main task first specifies the source: return gulp.src(typeScriptSource) It uses the same typeScriptSource variable that the tslint task used. Then, it adds the tsProject as a gulp pipe: .pipe(tsProject()) Finally, it specifies the destination path: .pipe(gulp.dest(destinationPath)); What the full script does is take all the TypeScript files in our source directory, run them through the gulp-typescript compiler, and save the output to a build directory. Run the script: gulp buildTS You'll see results similar to this: You can see from the output that both the tslint and buildTS process ran. No errors; so let's review the output. Review Generated JavaScript Code Look in your project directory and you'll see a brand new build directory: Each TypeScript file was turned into a JavaScript file. Let's examine the main file; as it is simple: "use strict"; var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic"); var app_module_1 = require("./app.module"); platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule); The first thing you'll notice is that the JavaScript iteration replaces the import statements with require statements. You'll recognize the require statement from the NodeJS code we are writing. However, browsers don't inherently support that. This is here because of commonJS module creation was specified in the compiler options. The systemJS library allows require() to be used in the browser, and that is what Angular 2 uses. Beyond that, the JavaScript code is not all that different from the original TypeScript code. You can review the other two JS files and you'll find similar results. What's [...]



Linting TypeScript - Building Angular 2 Applications with Gulp - Part 2

Tue, 21 Mar 2017 09:00:00 -0600

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Check out Part 1 here. This section will build a Gulp task for Linting TypeScript. The lint tool is a syntax checker that looks for errors. Install Dependencies First, install a NodeJS Plugin, tslint and a gulp plugin, gulp-tslint. Run this code: npm install --save-dev tslint gulp-tslint You should see results like this: Once the install is complete, you're good to start creating your gulpfile Create the Gulp Lint Task If you don't already have one, create a file named gulpfile in the root directory of the project. Our first task to create is going to lint the TypeScript code. The first step is to import the gulp and gulp-tslint libraries: var gulp = require("gulp"); var tslint = require('gulp-tslint'); This will make them available for use within our gulp script. Next, I'm going to define the location of the typeScriptSource: var sourceRoot = "src/"; var typeScriptSource = [sourceRoot + "**/*.ts"]; This is split up into two variables. The first just points to the source directory and that will be used throughout our script. The second uses the sourceRoot to create a wildcard glob that will cover all existing type script files in the main directory. Now, create the gulp task to lint the TypeScript: gulp.task('tslint', function() { }); This is an empty task that does nothing. Use gulp.src() to tell gulp which items to process: return gulp.src(typeScriptSource) Then, run the tslint() task: .pipe(tslint({ formatter: 'prose' })) This will parse the TypeScript, and make a collection of any errors. Then, report the errors: .pipe(tslint.report()); That is the completed task. Before we run it, we'll need to configure it. Specific configuration options are beyond the scope of this article. Put this tslint.json file, in your root directory and you'll be fine. The file comes from the official Angular 2 Quickstart documentation. Run the task: gulp tslint You'll see something like this: No issues. What happens when there are issues? I removed a semi-colon and added some random characters to the main.ts file and reran the lint process: It correctly found the error. The lint process performs a syntax validation; it does not validate the code for accuracy of imports or other bugs; but those will be flagged as part of the compilation process which we'll tackle in part 3. Get our expanded 38-page version: Building Angular 2 Applications with Gulp. First Name Email Address * [...]



Directories and SystemJS Config - Building Angular 2 Applications with Gulp - Part 1

Tue, 14 Mar 2017 09:00:00 -0600

I wrote an extended white paper on my Gulp process to compile Angular 2 TypeScript applications, and decided to turn some of it into a series of blog posts. The first part of this series will talk about the directory structure of the project, the initial setup, and SystemJS configuration. By the end of this series you'll have a good architecture for building Angular 2 applications with Gulp. Directory Structure You can find all the code for this series in our DotComIt GitHub Repository for project seeds. We structure our projects like this: build: The directory where the compiled code is placed. The root will most contain the main index file. com: Our compiled JavaScript code is put in a com directory, mimicking the package structure of a lot of Java package code. This may also include HTML Templates. For Angular 2 applications, I've seen this directory called 'app' in some uses maps: Source Maps are placed in this directory, if they are generated. js: JavaScript libraries are placed here, if any are required for the project. Some of these are copied over from node_modules, while others may be copied from the src directory. node_modules: A directory that contains relevant modules installed by Node, such as Gulp, TypeScript, and the Angular libraries. src: The directory where our source code goes. The root directory will contain the main index.html file, but not usually much else. com: Our TypeScript code is put in a com directory, mimicking the package structure of a lot of Java package code. js: JavaScript libraries are placed here, if any are required for the project. A default SystemJS Configuration is put in the source directory. I am not going to examine a sample TypeScript application in detail as part of this series. The GitHub repository includes a simple Hello World application, which will suffice for our demonstration purposes. Initial NodeJS Setup Gulp runs on top of NodeJS, so you'll need that. After that, we need to create a package.json in the root directory of your project. Copy and paste this into the file: { "name": "TypeScriptAngular2Sample", "version": "0.0.1", "description": "TypeScript Angular 2 Sample for Article.", "author": "Jeffry Houser", "license": "ISC", "dependencies": { "@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", "@angular/forms": "~2.4.0", "@angular/http": "~2.4.0", "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "angular-in-memory-web-api": "~0.2.2", "systemjs": "0.19.40", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.1", "zone": "^0.7.4" }, "devDependencies": { "gulp": "^3.9.1", "typescript": "^2.1.5" }, "repository": {} } This includes all the major Angular 2 libraries and dependencies in the dependency section. The devDependencies section includes Gulp and TypeScript. Install all this stuff with one command: npm install You'll see something like this: This creates the node_modules directory; and installs all the modules specified in the package.json, along with any related dependencies. This is the base we use for creating our build scripts. As we need Gulp plugins we'll install them individually in future installments. SystemJS Configuration Angular 2 uses a module loader system named SystemJS to give the browser require() functionality like you'd use on the server side with NodeJS. We need to provide a configuration to SystemJS so that it knows how to find our custom app code, and the required Angular libraries. I put this file in the src/js/syst[...]