I'm building a Wordpress theme and have recently switched from using Prepros to Webpack/Babel/PostCSS etc... to do all of the SASS and Javascript compiling manually so that I can add more custom functionality.
The last functionality of Prepros that I need to recreate is the automatic file uploading via FTP when a file is edited. I've been searching around for a while now and can't really find any Webpack plugins that will automatically upload files to a server via FTP whilst also giving me lots of options (i.e. specifying file extensions to upload/ignore).
What's the best way to automatically upload files to a server via FTP once they have been changed (saved) using Webpack?
At the moment it looks like my best option is webpack-ftp-upload-plugin, but it doesn't look like there are many customisation options as I mentioned above...
Use this script after completing build ftp-deploy. Right after the compilation, the bulldog will be deploy. You do not need to have a plugin in the webpack
"scripts": {
"build": "concurrently \"yarn prod"\ \"yarn deploy\"",
"prod": "webpack --config webpack.config.js --mode production",
"deploy": "node deploy"
}
Related
I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
In VSCode I'm using ftp-simple to upload a directory of static files from a Svelte site.
I would like to automate this, presumably using npm, so that when I run npm run build it also uploads the build folder to the specified ftp.
What can I use for this? ftp-deploy seems likely, but I'm not sure how to configure package.json etc.
Any help would be appreciated.
The documentation for npm scripts explains. Briefly, though:
In package.json, find (or create) the scripts property. Find or add a build property to that. The value should be the command required to upload. That can be a script that you write (using ftp-deploy or something else) or it can be a CLI tool that is installed as a dev dependency or a regular command or set of commands available to your shell.
So you might end up with something like this (but it probably won't be this exactly):
{
"scripts": {
"build": "myAwesomeFtpDeployScript.js"
}
}
I have a project with an existing webpack setup and it's unrelated to Vue.
Until now I have multiple entry points setups and some of these entry points are opening some iframes popups, and the plan is to build these iframes with VUE.
This means that I will also have multiple VUE entry points, this shouldn't be a problem but what I can't figure out is:
what is the best way to add VUE-cli into this already existing setup and use the same node_modules folder
Also to be able to add the vue-cli build commands to be run/triggered after my existing webpack build commands.
Let me know if more details are needed?
I've figure it out and it turn out that you can have both in the same project.
I've used vue create on my existing project folder and there is a prompt with a merge options.
Unfortunately it deleted my dependencies but was not such a big deal. Just had to reinstall them.
Now my project's webpack configuration remained completely separate form vue-cli which is handled by the vue.config.js and this is exactly what I wanted.
I am using something like this to build everything at once:
"build": "webpack --config webpack.prod.js && vue-cli-service build"
For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve
I have been playing with the Vue for few months and i really loved it. I am using the webstorm as an editor, it has all the pre-installed templates for the Vue and other frameworks and the development was really fun with the Vue. Anyway, when i decided to deploy the app on Heroku, it didn't work. When i run the project on my local machine it works fine but when i deploy on the Heroku, i get an empty page. I googled for the solution and i found out there should be some dist folder that i never had, even on my local machine i can't find this folder. For now, i have these folders:
My question, do i have to create DIST folder and move there the index.html and some other files? Do i have to run the npm build(i did and nothing actully happened). Here is my p.json:
"scripts": {
"postinstall": "npm install express",
"start": "node server.js"
},
"dependencies": {
"vue": "^2.5.2"
},
so what i do wrong and how i make my app work?
Thx
You need to create a final version. If you use cli vue version 3, you can use command vue-cli-service build.
Link: https://cli.vuejs.org/guide/build-targets.html#library
After build project you can download folder dist in heroky (or example surge.sh) and visit you site online.
Good luck.