@george this is the simplest development workflow that I’m using involving js tooling and CI to develop and publish. Posting it here so you have it as reference to see how Wappler could help with this by simplifying the workflow.
- Create scoped folder structure
- Init Git repo in the folder and add remote
-
.gitignore
contents
dist
node_modules
- Run wappler form and enter extension details
- Write code in /public and test it in browser
- Once satisfied copy code to
source
folder.
- Install
rollup
as dev dependency. Could be any tool.
- Add simple rollup config.
export default {
input: './index.js',
output: {
file: './dist/index.js'
},
plugins: [
terser(),
copy({
targets: [
{ src: ['app_connect', 'style', 'package.json'], dest: 'dist' }
]
})
]
};
- Add extra
package.json
config.
"scripts": {
"build": "rollup --config"
},
"devDependencies": {
"@rollup/plugin-terser": "^0.4.0",
"rollup": "^3.20.0",
"rollup-plugin-copy": "^3.4.0"
}
- Test build
- Create simple github action to publish to NPM on GH release.
jobs:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm run build
- run: npm publish ./dist --access public
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
- Commit and push to remote
- Create GH release and let GH action run to publish to npm.
So now the source is available in github and the distribution in npm.
Things that come to mind that could be improved:
-
Step 5) (writing code in /public) needs to be improved as we already spoke.
-
When building I have to create a /dist
folder and copy the package.json into it which has the build script
and dev dependencies
which are not needed really in the published package. So maybe a npm install -omit dev
is in order when installing via wizard a remote package?
-
Related to the previous one I have to publish the subfolder dist with npm publish ./dist --access public
from my CI. This is needed as wappler will only install from root and not from a subfolder. Maybe check also if there is a dist
folder with an app_connect
subfolder and allow remote installations with that structure? Then I can just add a files
node to package.json
and skip copying the package.json, app_connect, and publishing from subfolder.
-
Related to the previous one I have doubts about having the source in the root of the directory. Wouldn’t it be better to have this /@scope?/extension_name/src/app_connect
folder structure locally while leaving the package.json
in /@scope?/extension_name/
? This would allow more flexibility.