I'm currently using webpack-dev-server to automatically reload my Webpack application when a file is changed. This is working great.
On startup, my app checks the files in the project's folders, that data is then used within the webpack.config.js to make the app work properly.
I do this by using fs.readdirSync:
fs.readdirSync('pages', { withFileTypes: true }).forEach(entry => {
// Do something with the files here
}
When I just need to reload a file everything works fine as the files within the app are the same. However when I add a new file that wasn't considered by my startup script, the only way I can make Webpack aware of it is by manually restarting (CTRL+C + npm start) Webpack.
I've looked at the Webpack documentation and I can't find any mention of automating a full restart. Just reloads.
Is there a Webpack setting or an external package that would allow me fully restart Webpack when a file is added within a folder?
Look for nodemon or similar package and integrate it into your workflow.
Related
I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.
Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.
Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?
I used the Vue CLI to create a new Vue project, and selected PWA support when using 'vue create'.
I also used the vue-gh-pages plugin to deploy the app to a github pages URL.
The problem is that it's attempting to load
http://myusername.github.io/service-worker.js
..instead of:
http://myusername.github.io/app-name/service-worker.js
Inside of /src/registerServiceWorker.js I can noticed:
register(`${process.env.BASE_URL}service-worker.js`, {
But when I attempt to set the BASE_URL in vue.config.js with:
module.exports = {
baseUrl: '/app-name/'
}
..it breaks the links from all of the other scripts.
The app works when I run it locally, along with the PWA support. Anyone know how to get this to work with sub folders / github pages?
Thanks
I think you are forgetting to build your project before you deploy it. If you are running a Vue CLI that uses a build process, you should be running npm run build which will generate a dist folder that has all your resources as a static bundle.
You should commit that to your gh-pages branch and serve that instead.
I'm saying this because process.env.BASE_URL is something that the node.js side of things understands. GitHub pages won't be populating that for you at runtime since it only serves content statically.
I have a React application created using create-react-app. I also have an external application that is using this application by including the bundled JS and CSS files (the ones create using the build script).
Right now, I'm using the React template created by the dotnet new command, and I have configured the server to serve static files located in the build folder.
For this reason, I have created a couple of additional NPM scripts that rename the bundle files (remove the hash from the name), so that I don't need to update my external application's links with every build.
Right now, whenever I change something in the code, the whole build process has to be processed to create the two files.
I have created a "watch" task to run my build scripts whenever I have a change, but I was wondering if there is a way to speed up the process and somehow configure the React application to be served from memory or something just like when we "normally" run the application.
So, maybe a couple of questions:
How to achieve this in a "normal" React app created by create-react-app?
how to achieve this in the context of the dotnet template?
you can use nodemon in the build folder of the create react app.
as the documentation says
By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths:
so you can use something like this:
nodemon --watch app --watch libs app/server.js
for details try other approaches given here
This could be due to your filesystem, file extensions or the Create-React-App default webpack/project configuration. You don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
For example, I once had an issue with a Typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import. The same could happen with .js and .jsx files.
In case of problems with your filesystem (Unix, Mac) you can try the React config (FAST_REFRESH=false) here... or changing folder names, but I haven't bumped much into this.
tl,dr:
Here's what I got:
Electron
React
Webpack
electron-builder
electron-edge
node-fibers
some static assets (.png, .svg etc.)
Here's what I want:
A crossplatform autoupdating installer for the software
The long version and the problems:
I can get Electron, React, Electron Edge, node-fibers, webpack and the static assets to run perfectly when I start the webpackserver in dev mode.
However, how can I integrate this into electron-builder?
I'm new to this whole build process and I just took this boilerplate to get started:
Github of the boilerplate
To me, the dev debug process seems to go like this:
Have webpack create a bundle.js and an index.html out of my src folder
Start a webpackserver with hot mode that serves these files
However, how should I tell electron-builder where to get the different files from? There is no package.json nor node_modules/ inside dist/ and node-fibers isn't getting bundled as well (because webpack seems to fck with __dirname or smth, so I excluded it).
Whenever I launch the generated .exe file (that's not the installer, just an exe file that's supposed to launch the program), a message appears that main.js can't be found in the app.asar file. I tried extracting it, but it fails before it gets to extract the whole package. Main.js is never needed anyway though, because that was the whole point of having webpack transpile it or am I missing something here?
I have searched all over the internet for hours now, but I don't get all the concepts ..
Could anyone here explain what's wrong with my setup and what I can do to fix that?
I recommend you to use https://github.com/chentsulin/electron-react-boilerplate
If you don't want to use boilerplate for react app, consider to use https://github.com/electron-userland/electron-webpack (but boilerplate is strongly recommended).
I ended up with this boilerplate:
https://github.com/szwacz/electron-boilerplate
I couldn't get HMR to work and had to fix some es6 stuff, but at least it's doing its job.