I created an ReactJS APP. I want to deploy this app in hosted server. So i made the changes as
In package.json add "home": 'https://ww.domain.com/ReactApp"
Installed react-snapshot plugin. Added "&& react-snapshot" in build line in package.json. Replace React-Dom to react-snapshot in index.js.
Build the project and copy the files and folders inside build and paste inside server inetpub/wwwroot/reactApp folder.
Run the application favicon displayed in tab. Blank white screen. No error in console.
Anybody please suggest what mistake am i doing and please suggest quick solution.
Thanks
You can try the following steps to fix your question:
1.Please check your Webpack’s publicpath setting. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. please make sure it is set correctly, it will base links like above from that URL.
2.If you’re using create-react-app, you won’t have to deal with Webpack configs. The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. Now your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.
Related
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
I am working on a React project in order to build the user interface of a Nextcloud application. So far i used webpack to bundle all the code and use a single script file to inject in my Nextcloud application and it works.
The problem is the development experience, i would like to have features like auto-refresh of the page on file changes, so I am asking: Is it possibile to serve with webpack-dev-server a static url as localhost:8080 where there are my containers running nextcloud and refresh it everytime webpack detect a change?
thank you.
You might want to Hot Module Replacement.
First, install Hot Module Replacement plugin, then configure your webpack as this guide
I built my polymer project and deployed it with the firebase command. I followed the instruction on the polymer site. In Chrome on my Mac it works, but on my mobile(Chrome and Safari) and Safari on my Mac it display an empty page.
Can anybody help me out?
best regards
UPDATE: the dependency problem has been fixed with v0.16.0 which deployed this evening 8/24/2016. I have kept the below workaround just for reference.
This is a known issue: https://github.com/Polymer/polymer-cli/issues/347
includeDependencies stipulated in polymer.json is not being processed.
Here's the remedy for now:
The 'polymer build' process is not including the polyfill in the build even when you include it in the polymer.json dependencies.
This polyfill is necessary for browsers which do not support web components.
Therefore until it is fixed it needs to be added manually...
After running 'polymer build':
open the app's bower_components folder
copy the webcomponentsjs folder
open the build folder
paste the webcomponentsjs folder in the bundled/bower_components and unbundled/bower_components
run firebase deploy
(Do this for all dependencies you require.)
I am beginner on npm and web-pack-dev server. Recently I have created reactJs app using nmp and webpack. So at the beginning everything gonna fine when I save the content it auto refresh and reload the content on browser. But on next day, after restarting server and change the content the server does not reloading the content. Every time I need to stop and start the server to see the changes. Which is not good. I have fix the problem by uninstall and install the webpack and webpack-dev-server. But today I again I do the same but the problem did not fixed. Anyone please suggested me how to fix this issue. I have created the app with the reference http://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
The problem is fixed by adding the line above to the webpack.config.js file,
var webpack = require('webpack'), need to require the webpack package.
I have a project (angularjs) that is using webpack for bundling and it is deployed to a "release" directory with the webpack configuration output.publicPath set to "/".
If I grab the contents of my "release" directory (webpack bundle, index.html, and assets) and place them in a server (apache, iis or nodejs/express) directory it works great.
A problem occurs and I get a WHITE PAGE in the following three scenarios:
If I try to just open the index.html page from the "release"
directory in a browser (no server) with output.publicPath set to "/"
or set to a url (http://www.example.com/) in the webpack config
If I place it inside a mobile container such as cordova with
output.publicPath set to "/" or set to a url in the webpack config
If I change my output.publicPath from "/" to a url
My questions:
Why is webpack working fine with output.publicPath set to "/" and not set to a url (http://www.example.com/) in the webpack config?
To run a webpack bundled web application, do I need to have a server (apache, iis) running or can I just click on the index.html to view the app in a browser or just place it in a mobile container such as cordova?
Seems to me that my webpack bundled web application will only work with output.publicPath set to "/" and also needs a server to run.
I have tried many setups and only the first one at the beginning of this post works for browser not mobile.
Any ideas are greatly appreciated!
is webpack compatible with mobile platform containers such as cordova or do I need to do something special for it to work?
yes, you can use webpack with cordova without problems. You can check this repo https://github.com/uhlryk/my-cordova-react-boilerplate (it is my repo but in github there is many other examples of webpack bundle for cordova)
To run a webpack bundle application, do I have to have a server (apache, iis) or can I just click on the index.html to view the app?
It depends on what you have there in details. But it is possible to click index.html and run app. Check my other repo https://github.com/uhlryk/react-dynamic-number and look on example - http://htmlpreview.github.io/?https://github.com/uhlryk/react-dynamic-number/blob/master/example/index.html You can just click example/index.html and react app (webpack bundle) works.
I had this same problem when just opening index.html without a server. The reason for me was that it was looking for the dependencies in the wrong place (dev tools console error):
I used this generator to create my app: https://github.com/shibbir/generator-angular2-typescript
Clearly it looks for the file at a "root" (/) location, and that fails when you open from the file system (unless the files are in your root folder).