Say, we've a scenario with project of 10 commits. To be able to show changes over time, we can use "Github Desktop" too see LineChanges but can we also do it visually?
Manually, you can go back to each commit,
show all commit with "git log --oneline"
navigate to a commit with "git checkout COMMIT_ID"
make a production example with "yarn build", - create a new folder.
save that folder in a production folder ".prod", as "build-1"
go into directory .prod "cd .prod"
serve the folder "npx serve -s build-1 -p 3001"
But you have to repeat this process for every commit.
You could write a Script - to create & move build folder for each commit.
But before I make this Script, is there an easier way of handle this request?
Attempting to create a build folder for each commit - so I can serve them all at once and get a visual feedback over the progression of the project.
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 new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.
My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.
My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.
Now, For been able to handle this now I have a dedicated angular cli script in my package.json file
....
"scripts": {
"ng": "ng",
"start": "ng serve --port 9978",
"build": "ng build",
....
"custom": "webpack-dev-server --inline --progress --colors"
}
...
So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again
Is there a way to include this automatically when running the start script via angular cli?
I've been reading that when you run "ng serve" what happens behind the scenes is:
Angular CLI loads its configuration from .angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts Webpack dev server to preview the result on localhost:4200.
...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.
On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.
Am I missing something? Would this be possible to do? Thanks in advance!
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\"
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.
in my package.json I am using
"scripts": {
"start": "node app.js"
},
but if I use nodemon replace with node app.js like
"scripts": {
"start": "nodemon app.js"
},
then what will happen? Because when I got any error at server side, other API also close working. So I think it happen because I use node app.js if I use nodemon app.js than server will restart or not.
When you develop a node app and you make some changes, to see them in effect you have to restart the server.
When you launch your node.js application with Nodemon it will monitor for any changes and automatically restart the server, improving your productivity.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development. Install it using npm.
npm install -g nodemon
How to use nodemon?
nodemon "filename" ignore the quotation and place name of the server file.
Nodemon:
monitors for any changes in your Node.js application
automatically restarts the server,
saving time and tedious work.
it's one way to make your development efficient with Opn:
Opn is a dependency that opens web browser links, files, and executables. We will be using Opn to automatically open a web browser to our local host every time our server restarts.Install with npm
npm install opn.
How to use node?
node "filename" ignore the quotation and place the filename (ex app.js ,server.js)
node:
no automatic restart the server every time you do the tedious work
no monitors for any change
nodemon is like a live-server for your node application. any changes made in your node application will get reflected as server will restart again.
as stated here :
nodemon will watch the files in the directory in which nodemon was
started, and if any files change, nodemon will automatically restart
your node application.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
To use nodemon, replace the word node on the command line when executing your script.
In terminal,instead of typing node app.js,you can type: npm start
In package.json file,you can change it to:
"scripts": {
"start": "nodemon app.js"
},
In short,it is like a live server for node js, like we have in HTML & CSS.
When you are using node you have to restart on your own to see the changes you made But nodemon watches the particular path for any changes.If you make any changes in your file, nodemon will restart it for you.
when we install node, we will get automatically node and npm global variable.
for using nodemon you need to install it
npm install -g nodemon
we can access files with node as well but each time when we do changes we need to stop server and restart it.
node "filename" // provide filename
but if we accessing file with nodemon you no need to stop server and restart it only one line of command will save restart server time
nodemon "filename" // provide filename
this one line helps you saving lot of development time and test your sample javascript code
Nodemon stands for Node Monitor.
When you run a server using the command node index.js, after every change in your code you have to again run the node index.js command and reload the page to see the changes. Nodemon solves this problem for you. It auto-updates the server for you.