Build my Vue.js application with webpack and releasing a tar.gz

đź’» Development
#1

Hi,
I am new to NC development, and after writing my application, I now want to put it into production.
But I seem to have a problem with webpack…
My application is in apps-extra folder, and when I run the “yarn run dev”, the files are not compiled in /dist…
So I added in webpack.modules.js, in module.exports:

my_app: {
main: path.join(__dirname, 'apps/my_app/src', 'main.js'),
},

and the files are compiled!
Now when I switch to production mode (yarn run build) everything seems okay.
I’m preparing a release of my application, and I create a .tar.gz.

When I try to install my application on a new NC instance, I get an error and I can see that it’s related to webpack and the inclusion in the webpack.modules.js file
"Uncaught TypeError: M[A] is undefined"
and links to

// Execute the module function
	__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);

I haven’t found how to include my files in webpack, or where to declare the apps-extra folder in webpack to build my files…
Do you have any tips to help me solve my problem?
Thank you

#2

I suspect you are running Julius Härtel’s dev environment, right?

In what path are you running yarn? The change in the webpack.modules.js indicates to me that the folder structure is a bot off.

The typical installation as bootstrapped from the docs will cause the compiled sources to be located in /js not /dist folder. Maybe it’s there?

Christian

#3

Hi Christian,
Thanks for your reply.
You’re right, i’m running Julius Härtel’s dev environment and i’ve been noticed that compiled sources are building into /dist folder et and i copied them into /js app’s folder before generating tarball.
I run yarn outside the docker container into the nextcloud root folder, is this not the right way to do it?

Regards,

#4

Are you using the boilerplate code as a basis for the app? It should not be required to fix some locations or modify the boilerplate code in order to make it build successfully. Change of names and remove the existing classes, yeah, but it should build by default.

Those statements are somehow contradicting. What is the folder that the files are built by default, /js or /dist?

You are running the yarn/npm command in the working folder workspace/server/apps-extra/my_app, right? Outside docker is all right.

Is there a public repo of your source code?

#5

It’s hard to find documentation on using vuejs and NC in the context of app development
Thank you for your advice, I will look into the side of the configuration, the build environment and used tools.
I’ll come back if I can’t find a way out.

Thanks to the NC team for the work, some up-to-date documentation would be welcome ! :wink:
For example, I saw a video (youtube) that talks about integrating technologies other than VueJS in NC but I couldn’t find any documentation to do it…

#6

There is some documentation been build currently. See this blog post.

Also, there is is basic tutorial in the docs that serves as a boilerplate code snippet. It already has the Vue components in place. Did you use them?

#7

Thank you Christian for taking the time to reply, I was able to understand the problem thanks to your advice and comments.

1 Like