Hosting an angular-fullstack Yeoman Site on IIS - iis

I have a project built using the angular-fullstack generator for Yeoman. I would like to deploy this to a Windows Server running IIS. I have successfully generated the "dist" folder using Grunt and moved the "public" and "server" folders with files to my IIS box.
How do I configure my Windows Server to host my application? Do I need to have two IIS sites (one for "public" and one for "server")? Do I need to install grunt, bower, etc. on the Windows Server?

You don't have to manually install grunt nor bower. Install locally the node components declared in package.json using the following comman:
npm install
The angular-fullstack generator creates a Node.js application, so all you have to do is run the server side application. Run /server/app.js with Node.js
You can check how to run Node applications inside IIS here:
http://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWindowsAreYouMad.aspx

You have to deploy the application on iisnode
the do the right configuration for you web.config file I currently are able to run the application using the nodejs server but not in the iisnode applications because my web.config file still working correct I posted a question with more information here

This is just to give you a hint to the way to a solution. It´s not a detailed step by step answer.
If alredy using Grunt, you can use this grunt plugin.
It´s a wrapper of the msdeploy.exe command so you need to learn about that here.
Before all of this you need to install Web Deploy on your server. There are serveral strats and posts about this. I choosed using the Remote Agent way.
I manually create the website (don´t know how to do this remotely yet. Working on that. That´s why I found this question) before I deploy. Then I just sync directories in my computer (your /dist folder) and the path in the remote server.
This a piece of my Gruntfile.js with 2 examples defined in the grunt.initConfig()
'Backup' saves in a package (zip file) the current remote directory.
The second task called 'Oper' syncs your current build located on <%= yeoman.dist %>
msdeploy: {
backup: {
options: {
verb: "sync",
source: {
dirPath: '<%= deploy.Config.basePathOper %><%=deploy.Oper.Web %>,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
},
dest: {
package: '<%= deploy.Config.basePathOper %>\\backups\\web_' + grunt.template.today("yyyy-mm-dd-HH-MM-ss") + '.zip,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
}
}
},
Oper: {
options: {
verb: 'sync',
source: {
dirPath: process.cwd() + '\\<%= yeoman.dist %>'
},
dest: {
dirPath: '<%= deploy.Config.basePathOper %><%=deploy.Oper.Web %>,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
}
}
}
The task I created looks something like this
grunt.registerTask('deploy', function (target) {
if (target === 'Oper') {
grunt.task.run([
'msdeploy:backup',
'msdeploy:Oper'
]);
}
});
Don´t forget to load the plugin:
grunt.loadNpmTasks('grunt-msdeploy');

Related

office-js + outlook-web-addins + Webpack + Production

I am totally new to NodeJS, Webpack and specially to Outlook Addin. So, I created my Outlook Addin using basic tutorials from https://learn.microsoft.com/en-us/outlook/add-ins/addin-tutorial, all went well.
However, when it came to deployment on Production, I struggled a lot. I put all my code up on Production (Ubuntu instance). First tested a simple NodeJS "hello World" app on Port:8080 and it worked just fine. Then I tried to start my Outlook Addin, just like I was doing locally, it started on port 3000, but I needed to run it on 8080 and in the background. So, I used "PM2", and here comes the "WALL".
pm2 start src/index.js doesn't work for me, as the inside Office.onReady or any other reference to Office does not work, throws undefined Office error.
I tried pm2 run-script build, (after modifications in package.json and webpack.prod.js files)
However, I am still getting the same error when try to run pm2 start dist/app.bundle.js
So, please guide me which file should I reference to when using pm2 start {filename/path}?
Here are some configurations that I am using,
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
app: './src/index.js',
'function-file': './function-file/function-file.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'html-loader'
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
}),
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['polyfill', 'app']
}),
new HtmlWebpackPlugin({
template: './function-file/function-file.html',
filename: 'function-file/function-file.html',
chunks: ['function-file']
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map'
});
Contents of an Add-in
The files that are produced from your project when building should be at least some JavaScript, then perhaps HTML and some CSS, depending on what kind of add-in you're building. The most common is probably building an add-in with a task pane - which is basically a web page. In any case, the built files is not a Node.js web server.
Hosting your Add-in
Making your add-in available inside Outlook or Office requires that you host your files somewhere. It can be done with any web server - a simple python web server, Apache, Node.js HTTP server, or anything similar. It can be done on either localhost or in some other hosting service. The add-in tutorial shows you how to run a Webpack development server to host the files on https://localhost:3000 while you are coding (npm run start).
In your manifest.xml file you'll notice that you specify the address where your files are hosted. In my development setup, for an add-in with a task pane, I've specified that the files are hosted on localhost, like this:
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/index.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
Production
However, when running your app in production, the tutorial says that you should do npm run build. Those files that are produced, need to be hosted somewhere. I've hosted my add-in on Amazon S3, which is another way of hosting files.
To simulate it on localhost, follow these steps.
In the same folder as your project (where the dist/ folder is located):
Run npm install http-server -g
Run http-server dist/
Tools
To clarify what the tools are used for:
Webpack is what puts your app together, from your source code to a bundled version which can be run in a browser context. Webpack development server can be used to host files on localhost during development
Node.js HTTP server can also be used to host files on your localhost
pm2 is a process manager for Node.js. You can use it for hosting a Node.js server in production
#shahroon and I working on the issue together. We're still not able to get things to work and have now paid for a support with Microsoft. Sadly and very frustratingly Microsoft hasn't even acknowledge our support ticket and it's been 3 days.

How to bundle NodeJs Application?

Consider I have been done with my NodeJs with Express and MongoDB Application. I can bundle up my application to deliver the same to client but in that case client have to install all required npm modules and change mongoDB connection url. So to counter this issue:
Is there any other way to bundle my application so client do not need to install any npm modules to run application? If yes, then how client can connect to his mongodb?
pkg by Vercel works really well for me. It bundles everything into a single executable that runs out of a terminal. This makes it really easy to distribute.
To connect to a Mongo instance, you would have to have some kind of configuration file that the user edits. I recommend putting into the user data folder (Application Support on Mac and AppData on Windows), but you could have it sit right next to the packaged executable.
You can use good old webpack by setting it's target. here is an example webpack.config.js file for node:
import webpack from 'webpack';
export default {
entry: "./server.js",
output: {
// output bundle will be in `dist/buit.js`
filename: `built.js`,
},
target: 'node',
mode: 'production',
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
};

Configure IIS to use specified directory in Grunt

I am trying to configure IIS to use a specified directory in Grunt. Installing IIS creates the 'Default Web Site' and sets the path for this.
I am trying to make Grunt configure IIS to use a set directory depending on the machine it is on.
The way I have tried to do this is by using this site: https://www.npmjs.com/package/grunt-iis#options-path
I have used various options and tasks, even down to just using your_target and physicalPath. But I have had no luck.
grunt.initConfig({
iis: {
developer: {
physicalPath : __dirname,
site : 'Default Web Site',
path : 'NewSite',
pool : 'NewSite',
managedRuntimeVersion : 'v4.0'
}
},
});
Please can someone help me with this.
Thanks,
Sam
I have done this using exec command: command:
exec: {
command: 'c:\\Windows\\System32\\inetsrv\\appcmd.exe set vdir \"Default Web Site/\" -physicalPath:\"path"',
stdout: false,
stderr: false
},
},
});

How to make a Grunt file live reload when using jade?

I'm new to grunt and have been trying to make a development environment where on change to a Jade file to activate live reload.
I have been able to turn on live reload when using a vanilla HTML file using a grunt express server.
express: {
all: {
options: {
bases: ['C:\\location\\projectfolder'],
port: 8080,
hostname: "0.0.0.0",
livereload: true
}
}
},
I have also tried to compile the jade just afterwards then have the watch function afterwards.
jade: {
html: {
files: {
'C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder': ['C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder\\text.jade']
},
options: {
client: false
}
}
}
Could someone give me some guidance on how to make it so that any changes to the jade file (and any other project code in general) using grunt or any other tool?
Sounds like you need a file watcher. I use WebStorm IDE and it can be configured to use a Jade file watcher that continually compiles to html in real-time. So long as you have Jade installed on your machine, point the watcher to the Jade command (windows will be something like C:\Users\~USERNAME\AppData\Roaming\npm\jade.cmd, Linux/OSX would probably be /usr/local/bin/jade).
So then if you already have Grunt running a livereload server, it will pickup the html files your watcher updates. There MAY be a way to do this all within grunt if you aren't using an IDE with a watcher (have Grunt's live-reload trigger a Jade compilation), but this method works fine for me.

watch doesn't refresh the page on file change (express site)

It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.

Resources