Menu icon Foundation
Integrating Emails with C# Razor Syntax

I'm running a .NET server that uses Postal to send emails.  Postal provides the ability to use c# razor syntax for email templates meaning all my templates are in the form of .cshtml files.  How should I go about integrating Foundation Emails into these templates?

c#Razorpostal

I'm running a .NET server that uses Postal to send emails.  Postal provides the ability to use c# razor syntax for email templates meaning all my templates are in the form of .cshtml files.  How should I go about integrating Foundation Emails into these templates?

Corey Schaaf over 3 years ago

This is a long shot and I haven't tested it, but if could be a good starting point for you. 

Inside the gulpfile.babel.js (located in the root of your project) around line 50, you should see something like this:

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers',
      data: 'src/data/'
    }))
    .pipe(inky())
	.pipe(chmod(755))	//added this to fix file perms
    .pipe(gulp.dest('dist'));
}

I would change the line above to:

return gulp.src('src/pages/**/*.cshtml')

Then, a little bit further down the page (around line 90) you'll see something that looks like this: 

// Inline CSS and minify HTML
function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
    .pipe(gulp.dest('dist'));
}

I would do the same thing and change the .html to .cshtml. 

After that, you need to change the code in the next section. The second line above, again change the .html to .cshtml. 

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
}

If you're using any of the litmus integration around line 166 you'll see another location where the .html syntax needs to change to .cshtml. (line 4) 

 

// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
  var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
  return gulp.src('dist/**/*.html')
    .pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
    .pipe($.litmus(CONFIG.litmus))
    .pipe(gulp.dest('dist'));
}

In the next section where the files are copied and compressed into zips, you would need to change the variable name around line 170 (line 4 below) to .cshtml  (This way your pages are saved out as .cshtml pages). 

// Copy and compress into Zip
function zip() {
  var dist = 'dist';
  var ext = '.html';

Again, this is all theory and hasn't been tested but should give you a good starting point. Let me kn ow if this is helpful. 

 

 

Brian over 3 years ago

Thanks for the help!  This will definitely be an interesting integration.  I'm not too worried about getting the gulp build updated to accept the .cshtml files, rather I'm more concerned with whether the syntax used in the .cshtml will throw off the inky parser.  One specific issue I'm concerned with is whether the front matter used by postal will cause issues.  Postal uses front matter to set various properties of the email used to configure how the email is sent.  I've gotten pretty good with gulp so I should be able to make any necessary updates to the inky parser if needed.  If changes are required to the parser, I'll note my finding in this thread.

Simon Olsen over 1 year ago

How did you go with this? We're looking to implement Fluent Email and Razor Templates with our decoupled app.

It all looks pretty straightforward. I'd like to know if you got this to work and if there were any caveats.