I've installed everything what I need (webpack, webpack-server), confingured my webpack.config.js and package.json, still the localhost:8080 does not render on safe. Neither does it render on localhost:8080/webpack-dev-server/index.html on safe. On manual reload it renders perfectly.
package.json:
webpack.config.js
npm run dev executes successfully but I also have to reload the page manually after I make some changes in my index.html which is in the parent folder. Also, I always have to run webpack manually in my cmd when I change my .js file. Hot loading should also take care of this if I'm correct.
Let me also add that the app is recompiling when I run CTRL+s but it doesn't actually recompile.
I had a similar problem with live reloading on changes. Try to change link to bundle.js in your index.html
<script src="/bundle.js"></script>
If you look in console output after npm start there will be same like
webpack output is served from /
Dev-server takes bundle from root directory of your project, not from /js/bundle.js
Related
I need the following folder structure:
public
index.html
build
main.js
other.js
I have created simple demo, here is a link to github, so you can check the configs:
https://github.com/ArtemDomochka/dev-server
Problem: dev-server doesn't work
Details: If I will build the project with npm run build everything is good. But whenever I start dev-server with npm run start it doesn't work. May be dev-server changes file structure, but in browser I just get error: Cannot GET /, so it can't even find index.html
Is it possible to fix it?
There is also an interesting observation: If I will build project and then serve it, page will be loaded correctly, but it will not handle code changes in real time
I have created react application using create-react-app when I start "npm start" it is running using localhost:3000 in browser which is fine. But, when I click index.html from project folder it is showing blank page. Can you suggest me solutions on how to run react application using index.html file
Add "homepage": ".", to the top of your package.json file. Then build with yarn build or npm build. Go to build/ folder and double click on index.html.
EDIT:
Opening the app via index.html needs "homepage": "." in package.json because without it Webpack tries to load the static files from the root the file system rather than build directory. Reference
You can run npm run build, then go to the “build” folder where a working index.html will be located. The index.html in the project folder isn’t built for production/standalone use.
even though I reinstalled my react scripts I showing same in the inspect that these files are not loaded but the favicon from the react is loading fine why this happening I have spent 2 hrs and still no uses
The %PUBLIC_URL% is replaced during the build with the value you have provided in your settings. Try to run npm run build and inspect the build/ directory created by it.
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.
I have an electron app which runs with no problems when using electron www from the command line, however when i use electron-package to build a standalone binary, the built binary produces a console error as it cannot find certain front-end libs (angularMoment being one of them). Electron-package also fails to include other folders which contain the HTML templates for the app.
The project folder looks like this:
/electron
/www
/app
/css
/img
/js
/node_modules
- index.html
- main.js
- package.json
I am running electron-package from within the www folder and the process completes without errors however as mentioned earlier certain folders within the lib folder get missed off / ignored.
Any ideas why this is happening?
I recommend using the open source electron-forge to kickstart, build, and run your app. It has saved me heaps of time configuring, debugging, etc.!
When developing, did you install angular-moment by using the npm install angular-moment --save command?