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).
Related
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 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.
I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.
I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.
I am about to develop a web application. I will use this theme- http://startangular.com/product/flatlogic-angular-material-dashboard/ for admin panel. I already installed it on my local machine following the instructions. But this is my first time of installing a html theme like this using command lines (npm, gem and gulp).
I also noticed that all the AngularJS admin panel theme are has to be installed in that way. I mean using npm and other commands. Installation is fine. When I run this command
gulp serve
It opens the browser and show the admin panel. But the problem is I do not understand the project structure.
Admin panel is working when I serve gulp. But what I want is I just want to access without serving gulp. I mean I want to move it to xampp. Then integrate with a framework(PHP). So for now when I access directly, it is not working. What I want is I just want to have simple project, something like this
/project
========
/css
/js
/view
How can I build them into it? I mean using command lines. For now I have to serve gulp to access my project. To convert it manually, I checked the index.html and there are a lot of syntax commented I am not familiar with.
eg
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
How can I convert the Angular theme into simple project to send to server for deployment? Can it be done from command lines?
Now my project is under
c:/xampp/htdocs/material_dashboard/angular-material-dashboard
When I access this
http://localhost/material_dashboard/angular-material-dashboard/src/
It shows nothing. Just white screen. No error in browser console as well.
When I access this
http://localhost/material_dashboard/angular-material-dashboard/.tmp/serve/
It is showing these errors.
All status code 404 returns.
How can I access the project without serving Gulp? From which url can I access?
Development server
Angular applications are mix of JavaScript, HTML, CSS and every paths is relative to the root of application - index.html.
In this case copy contents of dist folder. Copy whole dist folder and deploy it.
Development server just tries to simulate real one production server. If it is working on development - that one that is executed over gulp server it should also works on production environment.
Production environment
It is time to go straight with application. There are only two major steps
build it with gulp build (of course if you are using gulp and there is task like that)
copy content of the builded directory to production environment (that steps is also called deployment)
CORS issue?
AngularJS application and the backend should be executed (should run) on the same protocol, domain and port address to avoid CORS policy rules.