I'd like to be able to run a custom command when webpack detects that my files have changed. The command is to run a middleman build command that is based on rails, and not a simple js build/include.
How would I go about this?
You can use any application that is built on top of fsnotify library. From ruby world you can use guard or nodemon from Javascript world.
You'd want to watch your generated files.
Whenever any of the two files changes, it will execute the command.
nodemon --watch webpack.config.js --watch webpack.parts.js --exec \"webpack-dev-server --env development\"
Related
First of all, I am really new to NPM stuffs. But I do know React and PHP. So I have figured myself to create a CMS system using PHP as a backend and React as a frontend with the help of CDNs from Babel and React(And ofc axios to make data requests and sends). However, I do want to get into more proper way with webpack with the actual website. So, I have followed along the tutorial from this article. He has explained quite extraordinarily. However, he uses HTML whilst in my case, I have a PHP. So since I am not fully aware of what I am doing. I have redirected the HTMLWebPlugin to my PHP File in webpack.config.js.
plugins: [
new HtmlWebPackPlugin({
template: "./../index.php",
filename: "./index.php"
})
However, when I make changes the code and refreshes it, the webpage will not adapt to the changes unless I run "npm run build" for the next time. I do know I am running it from the built app. And this is because I am rather making changes on the entry files (index.js) when the webpage is rendering the output files (dist/main.js). But is this okay to connect these two and is there a way to automatically adapt to changes I make in the entry files?
So finally, I have found my solution. When you want to re-run "npm run build" every time a file changes. You need to install watch via npm. It checks all the files inside a directory and when you change something or on-save, it will re-run all the scripts inside package.json. So steps -
Install watch by "npm install watch"
When watch is installed, add "watch": "watch 'npm run build' ./directory-you-want-to-track"
Run "npm run watch"
Use this command:
tsc src/index.ts --watch --outDir ./lib
ref: https://www.youtube.com/watch?v=F6aHIh5NglQ
Yes, there is a way to solve this issue. You can use webpack's Hot Module Replacement feature. It's is just running webpack in development mode with proper set of config which you should find in webpack official documentation.
If you are using Vite Laravel plugin open package.json
install watch
npm install watch
and on scripts change it to
"build": "vite build --watch"
It should automatically update when you make changes
I'm wondering how to generate source maps in create-react-app? are they done implicitly? and do they live in the build folder
I've read quite a lot about them being generated with webpack but my app is not using it, so I was wondering how I do this without webpack?
I also don't want to eject
According to CRA documentation, source maps are generated by default in production mode.
However, you can disable this behavior (generating source maps in production mode) by running GENERATE_SOURCEMAP=false ./node_modules/.bin/react-scripts build or if you want this behavior to be permanent, do one of the following solutions:
Set GENERATE_SOURCEMAP=false in your .env file.
Modify the scripts in your package.json and replace "build": "react-scripts build" with "build": "GENERATE_SOURCEMAP=false react-scripts build"
https://facebook.github.io/create-react-app/docs/advanced-configuration
You can truly set GENERATE_SOURCEMAP=false for windows, like #3b3ziz said. However, to run the script across different OS, its better follow the Advanced Configuration Chapter in official document.
Here's what's needed:
Create a .env file in the root of the project. (same folder as your package.json)
Write GENERATE_SOURCEMAP=false in this file.
Rerun whatever you need. react-scripts doesn't detect change in .env.
I'm trying to have pm2 watch everything in events, commands, data, index.js, and config.js.
pm2 --name druggy --watch
events,commands,data,index.js,config.js/index.js start node -- index.js
I used this and whenever I try to change a file in one of the folders, when I save my bot it doesn't restart. However it does restart if I change the index.js. How can I make it restart when I change anything inside those folders and the two files?
Do not give --watch any parameters. You do not pass them in through the command line, anyways. Change your command to the following:
pm2 start index.js --name druggy --watch
If you do want to specify which paths to watch, then follow the documentation located here.
I have an application built using webpack and webpack-dev-server.
webpack-dev-server is being called using node api.
e.g. https://github.com/webpack/webpack-dev-server/blob/master/examples/node-api-simple/server.js
Everytime a file is changed and a new build happens i'd like to execute a shell command. Where could i configure webpack or webpack-dev-server to do this?
Did you try the webpack shell plugin?
https://www.npmjs.com/package/webpack-shell-plugin
I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?
Thank you
After running "npm run build" on your create-react-app generated code, it displays instructions to help with just this. It says something like:
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
The first command, "npm install -g pushstate-server" only needs to be run once, as it installs "pushstate-server" to global NPM. The second command "pushstate-server build" runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000. You can change the port number if you wish, by adding it at end of command line: "pushstate-server build 1234"
UDPATE: Serverless method...
If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:
After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.