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.
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've downloaded this Phaser/MatterJS example from Codesandbox (->File ->Export to ZIP).
Running it locally returns this error:
Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1
How to fix this?
What I tried so far:
I've installed all dependencies
Updated to latest NodeJS
Running it with a local server
Just as you have seen yourself the javascript that is written in the files is not something that the browsers understand out of the box, and so errors were thrown your way.
To send js that browsers understand, you need to use a tool like webpack, parcel. already in the project you shared parcel is used.
You have to do the following:
install the dependecies of the probject
in the root dir of the project run npm run start
parcel will bundle the files and then open an html page with the results
unfortunately when i tried this parcel did not work for me, there were errors related to JSON loading, however i have managed to get the game to work, by running npm run build, this will output for you the build files in a folder called dist.
Go to the dist folder, and start a local server there and visit the file it should work, however again for me it did not work. but i noticed that its due to parcel not getting the correct relative path of the bundled js file.
To solve that, open the index.html file in the dist folder, you will find that there is one script there
<script src="/js.d8530414.js"></script>
I had to change that to
<script src="./js.d8530414.js"></script> // because this was the correct file in my file system
After that visit the html file in the dist folder, and the game works fine.
Obviously this way of working is not conveninent, since for each change you want to see you have to build the project again using npm run build. You need to solve the problem of npm run start not working, it could be that this problem never occurs to you if you are on different os than mine. If it happens then i suggest updating parcel and trying again, if problem still persists, then you can look here since issue seems related to phaser wanting the json file as json, while parcel compiling it to javascript object.
index.html:
<script type = "module" src = "./js/index.js">
You have to tell the browser that this js file is a module, then it will change some things on the backside for you to use this. This article is very helpful for getting started with modules.
I am currently trying to generate native versions of a small meteor app I built. When I run them on iOS or Android via the meteor run command it works and meteor build with --debug also generates an ipa/apk that works as expected. But when I run meteor build without --debug the web view only shows a white screen. Using remote debugging I noticed an injector error. I was wondering why and checked the apk/ipa content. There I recognized that in the debug version under assets/www/application/packages there is a bunch of .js and .js.map files which simply is not there in the non-debug ipa/apk.
In the index.html of the non-debug ipa/apk the imports of these files are also missing.
How can I tell meteor to just copy these obviously required files for non-debug?
When you build, Meteor concatenates and minifies all the JS files into a single bundle, same as Browserify and webpack are doing. That is why you do not see all the script imports.
It does not do it in debug to facilitate live reload / hot code push while you are developing, besides facilitating debugging​ obviously.
See the Meteor guide on building for production.
If you believe this difference causes some issue, you can simulate it in development using the --production flag after meteor run.
This addresses your titled and last question, but may not fix in itself your initial issue.
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
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?