Feature: support code reuse for multiple-extension repos about create-contentful-extension

[Jwhiles]

It sounds like you've been able to find a process that works for you.

I'd also note that we're now supporting https://www.npmjs.com/package/create-contentful-app instead of this repo. It uses create-react-app, and should be more straightforward if you need to customise the build process.

I'd also mention suggest that if you're managing a lot of apps or extensions with shared code, you might benefit from using lerna which offers some tools for managing mono-repos.

Cheers!

[diegoaguilar]

@asbjornh What was the solution, approach or strategy that you took? Soon to have the same situation and trying to have an informed decision

[asbjornh]

@diegoaguilar No solution really 😐 We’ve just kept duplicating code except for a couple of utility functions that don’t use node_modules or need transpilation.

[asbjornh]

@diegoaguilar I had another look at it today and it's actually not that hard to get around using Webpack.

For deployment, you'd just build with Webpack, and then do the following (contentful-cli is required for this):

contentful extension update --force

One thing to be mindful of when building manually with webpack instead of using contentful-extension-scripts is that the plugin can only consist of a single .html file, so all assets (js, css etc) need to be inlined. inline-source-webpack-plugin can be used for that.

For local development, you can use webpack-dev-server and then run the below command once the plugin is available on localhost:

contentful extension update --src http://localhost:8080 --force

This would make the Contentful UI load the extension from localhost just as when running contentful-extension-scripts start.

When doing this you'll probably not want to inline your assets, since they'll be cached in the HTML which is not ideal for development. If you're using inline-source-webpack-plugin a way of doing this is to have two HTML templates (one for development and one for production), where the production one inlines assets and the development one does not.

As for importing files from "outside" of the project folder, I don't remember exactly how to do that with Webpack but I've done it in the past so I'm fairly confident that it's still possible.

[diegoaguilar]

Thanks for sharing this! So you're saying that if i use the contentful-cli way for building instead of using create-contentful-extension which abstracts and wraps too much, then I'll be able to set it up with Webpack.

Correct?

[asbjornh]

Well, sort of. contentful-cli doesn't provide a way of building stuff, but it lets you upload extensions either from a url or a file. contentful-extension-scripts start basically builds your code with Parcel and then calls into contentful-cli here.

Here's the docs for the relevant part of contentful-cli.

In short, if you use contentful-cli instead of contentful-extension-scripts you control the build system yourself.

After learning more about the Contentful tooling ecosystem I'm not really sure that this is a shortcoming of contentful-extension-scripts tbh. It would be good to mention in the documentation how to use other build systems than Parcel though.

[asbjornh]

I created a small plugin for Webpack that makes development and deployment of extensions a little easier when using Webpack: update-contentful-extension-webpack-plugin