Octo packaging a reactjs app using webpack

Legacy Execution
1

Hi,
Do you have any pointers on what extensions/plugins can I use to package my ReactJs app using webpack so that it can be deployed using octo deploy?

I saw examples for Grunt and Gulp but nothing for Webpack. Please advice.

Thanks,
Ashu

2

Hi Ashu,

Thanks for getting in touch.

I’ve made an attempt at writing a plugin that will pack and publish using webpack:

It’s still a bit rough so may require some modification on your end. PRs are most welcome. Have created a branch in octofxjs with example usage of the plugin:

I hope this helps.

Cheers,
Shane

3

Thank you so much Shane on spending time on it. Would you know how to fire this from msbuild so that I can integrate it with CI. Thanks.

Sent from my iPhone

4

Hi Ashu,

To use the plugin you would just need to run webpack from your build server and it will package your app and push it to Octopus. See here for some details: http://stackoverflow.com/questions/40993795/msbuild-and-webpack

Cheers,
Shane

5

Thank you again Shane.
On using the Octo webpack plugin you created – can you tell me the usage? I am struggling with it.
I have added the plugin into webpack.config.js but it doesn’t seem to work.

[cid:image003.jpg@01D28C47.D0FFAFF0]

All it says is;
[cid:image004.png@01D28C47.D0FFAFF0]

image003.jpg

image004.png

6

Hello Shane, please ignore my previous question about not being able to use the webpack extension. Its working now, I was missing some basic steps.

Question – can I use octo webpack plug in to generate a nuget package for my javascript application?

7

Hi Ashu,

The webpack plugin is a wrapper for octopackjs: https://github.com/OctopusDeploy/octopackjs

It will allow you to pack as zip, tar or targz. If you want to create a NuGet package you could add a nuspec file to your javascript application and run NuGet.exe. To integrate with webpack make a wrapper around NuGet.exe similar to the octo-webpack-plugin.

If you look at the source for octopackjs there is the start of creating NuGet packages.

Cheers,
Shane

8

I tried it… Seems to be working.

I saw these comments – “throw ‘Currently unable to support .nupkg file. Please use .tar.gz or .zip’;” and “throw ‘Currently unable to support .nupkg file. Please use .tar.gz or .zip’;”
Do you know the reason? Is there any upfront issue I might run into using this code?

Thanks,
Ashu

9

Hi Shane, will you have any idea why webpack is not creating bundle after adding octowebpackplugin in webpack.config.js file? This is the error I get.
[cid:image001.png@01D28D17.537F1F90]

This is how I have added the plugin. If I remove the octowebpackplugin then bundling starts working. Any help is appreciated.
[cid:image002.png@01D28D17.537F1F90]

Thanks,
Ashu

image001.png
image001.png705×103 11.5 KB

image002.png

10

Hi Ashu,

The NuGet part of octopackjs was abandoned because it was difficult to maintain and unnecessary with zip/tar support in Octopus.

Would you mind sending me your bundling config and package.json so I can reproduce?

Cheers,
Shane

11

Here you go.

package.zip (1 KB)

12

Hey Shane,
Any updates on this one?

13

Hi Ashu,

Sorry for the delay getting back to you, I have been trying to push some bug fixes across the line.

I will get back to you with a solution soon.

Cheers
Shane

14

Hi Ashu,

I’ve updated octo-webpack-plugin so it will create the archive “after-emit” (https://github.com/webpack/docs/wiki/plugins) so the bundle has a chance to be created before attempting to archive it.

Don’t forget to delete your existing octo-webpack-plugin and npm install again.

Hope this helps.

Cheers,
Shane

15

Thank you Shane.
I will try it out in a couple of days and let u know.