I am new to hosting and it would be of immense help to me if somebody can explain in very detail.
I have following questions:
I have front end using react app and backend using expressjs and mysql. i have a working simple application in my computer . I start backend and front end using local host and they work perfect . when I bought hosting which supports nodejs , I don't know where to place the front end file and backend file .
npm run build - > builds a react app . in cpanel - file manager , which file I should place in public html . front end code or backend express code
I placed html code in public_html but how to start interacting with server.
When I used fetch("http://lcoalhost:30000") to fetch I couldn't get the app.get("/",(req ,resp)) working ..
I am really confused . if somebody can explain in detail how to start uploading both the react and express file and the location to place these files.
Upload your react app build files inside public_html. Don't forget to change the localhost url to your express app to your actual url.
Create a folder outside public_html and upload your express app in it.
Create a nodejs app (using cPanel, if it has). Use the express folder and a url different from home (like /api) during creation.
Related
I have a project with React front end and Node backend using ExpressJS. The backend server basically just returns a json that I can fetch data on my front end. On back end, there is a xml file. So the whole process is convert xml->json on express backend, then fetch data from express backend on react front end.
When I do node index.js to start the server, and do npm start to start my front end, everything works perfect, the front end renders all data.
Then I wanted to deploy this project on Heroku. I put all files into one directory and seperate with client and server directories. Then I npm start build the code in react. In my index.js file of backend, I have
app.use(express.static(path.join(__dirname + '/public')))
and then I copied and pasted build files into the public directory in my server directory. I should be supposed to run the app by node index.js, the app worked, however, the data was not read. Is that because I only started the front end but did not start the server so I didnt get any data? How do I fix this?
My Vue app is set up using Vue CLI (Webpack) and it's working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them -- each with its own port. I would like to have both of them communicate over one port.
Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/...
In my production environment I use one and the same port/URL by serving the Vue App as a set of static files ('dist' folder). In my development environment I don't know how to set this up, however.
I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.
What would be a good way of setting this up?
Thank you
Edit:
I ended up creating three modes to run my application:
Development
I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the 'background' rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.
Staging
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the 'dist' folder.
Production
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.
Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
app.get('/api', function (req,res) {
// your api handler
}
app.listen(8080)
Assuming that node and the 'app' will always run on the same server you can just use a template library like ejs.
You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.
Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
Hi I implemented an image upload system on my website but now I don't know how to link to that image.
My root directory has a client folder, for my vuejs app, and a server folder, for the back end logic.
When users upload a file, the file goes to a public folder under the server folder. This is where I got stuck.
How do I then link to that uploaded image from my vuejs app that is in the client folder.
Keep in mind that my express app is running on port 5000 while my vuejs app is running on port 8080.
In my img tags I tried linking to the image by using "http://localhost:5000/public/image/imagename" and "http://localhost:5000/image/imagename" but no luck
In your express.js logic you should expose your public folder
app.use('/public', express.static(`${__dirname}/public/`));
I'm supposing your express entry point is in the same backend folder as '/public/ folder.
And then you can just access it like you've tried before on: http://localhost:5000/public/image/imagename
I am building an app using angular2 and I want to keep a folder named as 'uploads' at the root of my application. However since in angular the current root is 'src' it does not let me access images inside the uploads folder.
If I try to keep 'uploads' directory inside the src folder then everytime I upload a file to it, it rebuilds the application and refreshes the page. I would want to keep it in suchaway that angular cli doesnt refresh the application in case file upload happens.
I want to access the url like : http://localhost:4200/uploads/xyz.jpg in angular2 app
Thank you
The angular app is a front-end app. It is not meant to be used as file storage. The file storage should be done by a back-end app that will serve the uploaded files to the front-end app.
Using your Front-end
Angular-cli does not compile any folder outside app or assets, so, you need to place the folder inside app or assets.
To access directly, place inside assets and access like localhost:4200/assets/uploads/xyz.jpg.
Remember that you need to be careful because if you use a git versioning system, when you make a pull in your production env, every file uploaded inside assets/uploads will be overwritten by the new version.
Using your Back-end
Put the upload file outside the angular app so when you build or update the angular app nothing will be lost. And use a back-end to serve the files.
You should place the upload folder outside the angular app and serve it using your nodeJs app. Use the static feature of expressJs to serve your file in some endpoint like localhost/uploads/xyz.jpg (if your nodejs is in localhost). So, you don't touch the angular-