I have two folders into a principal folder, one folder is called frontend, and had the angular project, and the other is called backend, this folder has a backend and all API. I would switch this project like SSR project, can integrate the angular project into a node project, then when I execute
npm run dev
And node project starts on the respective port, automatically the frontend side starts within.
I tried multiples ways to create a path from one folder to another, but not have success.
If I do this
const indexTest = (path.join(__dirname, `../frontend/src/index.html`))
server.get('/', (req, res) => {
res.render(indexTest)
})
Appear this error
But, if I do that
const indexTest = (path.join(__dirname, `../frontend/src/index.html`))
server.get('/', (req, res) => {
res.sendFile(indexTest)
})
Don't show me any error, but the principal page is blank
Server firmware code
Server app index.js principal
You are trying to render the frontend based on the source, and that will not work.
On Angular projects you need to build the code first, so later you can render it.
If you want to do SSR, then you will need to use something like Angular Universal
Another option would be to point the backend to the dist folder, and then run the angular cli in watch mode (scroll till bottom). Like this: ng build --watch --output-path dist
You will need to add this code to your backend.
Probably something like this:
server.use(express.static('../frontend/dist'))
Related
Hi even after lot of search i am still confused what is correct way to deploy my react app created using create-react-app with express as backend.
I ran npm run build which created build folder. I copied the build folder to be served as static folder of express and had put
app.use(express.static('build'));.
It is working fine for homepage, that is homepage opens when i run my express node server but when i go to anyother link outside homepage it gives 404.
Everything is working fine in developer mode, which i run by npm start command. I just want to know what i am doing wrond here. Let me know anymore info required to understand the problem. Thankyou.
It sounds like you don't have the backend server running. You need to npm start your server, and then npm start your front end if that make sense. They are 2 separate things.
Are you using client-side routing? A popular implementation of that is react-router.
Let say you are trying to access /page1, what client-side routing does is use the JS to toggle between different components to "fake" the routing, instead of rending a new HTML.
Yet, by default when you change routes, the browser does the usual stuff and send a GET request to the server asking for the corresponding HTML file. But since you only have index.html served, that's why you received 404.
You need to add the following at the end of your app.js, right before you call app.listen of your express server to tell the server to always return index.html no matter what route does it received.
/* client-side routing.
* For GET requests from any routes (other than those which is specified above),
* send the file "index.html" to the client-side from the folder "build"
*/
app.get("*", (_, res) => res.sendFile("index.html", { root: "build" }));
// your usual app.listen
app.listen(port, () => console.log("Listening"));
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.
Im currently building a simple app using the MERN stack to learn. What Ive done so far:
-User Registration and Login (API)
-TODO List (API and Frontend with static files)
Ok, Everything works good and as expected, except for one thing.
I attempt to use my API's for any request, but at the same time I want my whole app to work rendering in a web browser (TODO list). So, the process I've followed is:
-Start node instance
-npm run build (To build react project files)
I did a research on how to use React build in node project and I did the following:
app.use(express.static('myproject/build'));
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'myproject', 'index.html'));
});
Good! So when I go to http://localhost:4000, it renders my index file and it actually works with my Login API, but I have some API's that are only available for consuming data and not rendering UI.
So, my problem is that when running the app, if I go to: http://localhost:4000/api/users/getdata
I get an error saying: Error: ENOENT: no such file or directory pointing the index.html
Ok, if I uncomment the code I posted before, then of course my app is not rendering UI, but my routes from API's work normally.
I know this might be setup/configuration process, but Im trying my best to understand this. If somebody could assist me with this problem please.
The hierarchy im working goes as follows:
myproject (contains models, routes (API's), middlewares, index.js)
frontend (inside folder 'myproject') (build, src (Components))
I did what #MaxAlex suggested. Changed the code from:
app.get('/*')
to
app.get('/')
I have built an angular5 client app and a nodejs (using express) server app working on ports 4200 and 3000 respectively. Now I want to merge them both in a single app as a deliverable.
Will just copying the angular folder into nodejs work?
Not sure how to go about it.
From a code organizing perspective.
For development, keep each app in its own folder, something like
nodejs
angular-app
In production,
nodejs
public
angular-dist-folder
Deployment scripts can handle this for you, you should avoid doing manual copy pasting of stuff, It is important to keep code organized, it is absolutely important and vital for the success and health of any project.
Edit:
I ld like to add, modern JS projects makes use of some sort of file system watchers, Ex fs.watch . Keeping apps in separate directories, prevents the unnecessary rerun of processes during development.
In your angular folder, run ng build --watch. This will build your project and create a dist folder. Also, it will watch for any code changes and rebuild.
You can copy this dist folder in your node project's public folder and make a few changes in your server.js file to integrate that.
You can use nodemon server.js to look for changes in node project.
Below are the changes which I made in my server.js to make it work.
app.use(express.static(path.join(__dirname, 'public/dist')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/dist/index.html'));
});
I am building a web application using Angular 5 and nodejs with express. As both the frontend and the backend are going to run in the same server I want to use my backend javascript functions in the frontend. The solutions that I have found didn't worked for me.
appController.js
var createApp = function (appData) {
console.log("App created")
}
exports.createApp = createApp;
This is the backend file that I want to use in the front.
Javascript files don't need to export things when used in the front-end. Most of the time, they use global variables. You should go with that.
To add it to your project, add it anywhere you want, and in your Typescript, you can simply use
declare var myGlobalVariable: any;
// ...
myGlobalVariable.createApp();
I did a similar thing. I have a frontend with Angular 5 and a backend serving an API via Express:
If you want to run your Angular frontend and your NodeJS backend on the same server you'll have to build your Angular project and serve the built files with your Express server.
I think I found a tutorial on that – but I can't find it right now...
Instead maybe have a look at my code for the backend:
https://github.com/saitho/ngHashi/blob/next/backend/src/index.ts
In production mode it will serve the files in the folder /backend/dist_frontend by default (apart from the backend routes (/api)). I use a build process (GitLab CI) to move the files I need to the respective place...
I finally find a solution. It would be necessary to modify the tsconfig.json:
tsconfig.json
{
compilerOptions: {
.....
allowJS: true,
......
}
}