I meet an issue as below:
My react-app is hosted at https://myserver.com and
Another server is hosted at https://myserver.com/another-server
I want to navigate outside React so I tried with window.location = 'https://myserver.com/another-server' in my React app code. It works with development mode (I uses create-react-app) but does not work with production mode. My react-app grabbed that URL and rendered to NotFound component in my router.
Production mode built by using:
npm run build
serve -s build
I doubt this is caused by serviceWorker but any ideas?
Related
I am asking here because I have no idea what to do anymore. I want to deploy my React app that uses Nodejs as a server and I cannot find a proper article or forum to help me. They all only talk about how to setup Nodejs or how to setup React. Nothing on how to setup both at the same time. This is my first React project with Nodejs.
I am trying to deploy my React app using a Node.js as a server onto cPanel on my domain. When adding my React build folder to public_html then the front end is good and obviously Node is not working when I try to use the backend functionalities. When I go and setup a Node.js App in my cPanel I cannot get the js script to point to server/index.js, it only selects index.js in the root. Check image below:
I point my index.js with my server config to server/index.js in my Application startup file but it keeps going to the index.js in the app, not server/index.js.
My directory is as follows:
-app
-build
-node_modules
-public
-server
-index.js (must use this one)
-src
-.env
-package.json
-index.js (keeps using this one)
How can I deploy my React app with Node server using cPanel? Please help.
I have created my project with Create React App and for a server using nodeJs but when deploying to production, the file index.html is missing in build folder. I've checked the public folder and the template of index.html is still there.
Refer to react-create-app documentation. Creating a production build
When running in development mode, create-react-app spins up a server that serves everything from the public folder.
Thus, in production, your express app also needs to serve everything from the public folder.
server.use(express.static("public"));
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
I am trying to deploy an application I am building with the MEAN stack to Heroku and am having some trouble. I think the issue is with the structure of my application. I have all my server code in a folder called server, which has its own package.json and src folder that contains the actual server code.
Right now I am simply trying to get Heroku to deploy the client side of the application. I am only getting an error... I know that the database and server are not running but I cannot even get past the initial displaying of the app. I have one web dyno set up to run ng serve (npm start) on the app.
If someone would be willing to look at the structure of my application and sees why I am unable to deploy to Heroku without really digging into the code, that would be much appreciated.
Here is the code
Please note that it is on the deploy branch, and this is on purpose. I do not want to push anything to the master until I am sure it is working.
The Angular web server targets localhost:4200 by default. That can be changed with a couple command-line options. --port accepts a port and --host accepts a host IP address.
So you could modify the ng serve script as follows: ng serve --host [host-ip] --port [port-number] --disableHostCheck. That last flag (--disableHostCheck) tells the dev server to bypass host checking when normally ng serve fails on anything except localhost. Terrible idea if meant for anything except private development/testing.
Another issue: Heroku runs off web dynos and from what I understand about them, they use a random port and IP each time. While the random port is stored under the variable $PORT, the IP does not seem to have a similar variable. Web dynos keep that information to themselves.
Heroku does offer this command: heroku local web. It runs your application on localhost:5000. That means ng serve --port 5000 works perfectly with this command. This should tell you how your front-end will run on Heroku. Your angular dev server will function as expected too.
For actual deployment to Heroku, use that express server of yours. Run ng build from your file system and it will spit out an index.html in the dist folder. This file holds your entire front-end application. You can then upload that file into your browser from the server.
For express that usually breaks down into:
app.get('*', function(req, res) {
res.sendFile('path/to/index.html');
});
Hopefully this helps! Let me know if I missed the mark anywhere.
I have created Angular-universal app with reference to this Angular GitHub Repository. I have used node express for server-side rendering.
I have built using this command
npm run build:prod:ngc
now I got the client and the server folder in the dist folder. No other files there like index.html.
Previously I developed the angular2 app using CLI, on building that it create a dist folder with bundle.js, index.html, and CSS files. I used to upload that particular thing to shared hosting. The app was working fine. But in angular universal I am confused. I am stuck on how to proceed further for production. I have the shared hosting, Please help me how to host the project in shared hosting.
With universal you have to set up the server first and then start the server to listen at some port(80 normally :P)..
normally.. once you setup the node server on the hosting area, you can just go to your source code and start the server using cmd:-
sudo PORT = 80 npm run server (if ubuntu)
to listen at port 80 and then you can access the site then using IP/domain name.