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'));
});
Related
How to host an application React js with node js backend. Couldn't find anything on the internet. Do I need to run the
build
command on the backend? Help me please.
Thanks in advance.
The way I do it:
I build my react project and host it on the server.
As for node js, I run it on it’s own, and use Pm2 to run it on the server ( https://pm2.keymetrics.io/docs/usage/quick-start/ ) but there’s plenty of other ways you can find on google.
I hope I answered your question
I suggest you use Heroku, you get to host your full stack application for free, directly from your GitHub reposity, it takes care of automatic redeploys whenever you push something on your repo.
The only – slight – downside is having to wait ~5 seconds for the server to start up if your app hasn't been visited for a while and becomes idle (if you use a free option that is).
There are plenty of tutorials on how to do so.
As for serving the static version to your app in production — this could be of use:
server.js
/* If in production mode - serve compressed/static react content to server. i.e. what would be otherwise localhost:5000 would display frontend content.
/!\ Do not forget to generate Procfile and script for Heroku to insure proper generation of "build" directory /!\ */
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "../frontend/build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "../frontend", "build", "index.html"));
});
}
Heroku will take care of it automatically if you tell your server to serve the static version with the code above.
There is also Glitch.com
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 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'))
this is the api call i want to make
http://localhost:3000/api/getUserName
but i am using it in proxy in package.json. i tried to build the app but then call goes to
http://localhost:5000/api/getUserName
i am serving on 5000 so its taking api call also on 5000. so i want to mention 3000 om build. also i have check on google and it says mention it in .ENV cause proxy is not for production, but can anyone provide me .ENV structure that can show to me how to use it from env?
During development, the practice is to use to two servers; one server for the client side, generally localhost:3000, and a second one for the server, generally localhost:5000. When you build for production, reactjs compiles and builds such that it becomes a static resource for the server and the server serves these files.So, your app will be served, wherever you host your server. The production config will depend on what you folder structure looks like. If you are using CRA for your application, you can use this piece of code:
I am assuming that you have your client directory inside your server directory.
if(process.env.NODE_ENV === 'production'){
app.use(express.static('client/build') //path to your build directory
const path = require('path');
app.get('*', (req, res)=>{
res.sendFile(path.resolve(__dirname, 'build','public','index.html');
}
}
Again, I am assuming that you are using CRA to bootstrap your react application and have your client directory inside your server directory. If you are using webpack, then the config will change to indicate the path of the build directory.
Is it possible to run angular2 with node js without the given code in nodejs?
What if i don't want to use dist folder in nodejs?
app.use('/', express.static('dist'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
IMO, dist is basically the compiled angular code,
You will still need the angular code somewhere to be served by the node server.
From the express server's point of view, it doesn't matter whether its a compiled code (dist) or the uncompiled one.
Note:
By compiling I mean build tasks which are performed over the Front End Code, Tasks like minification, uglifications, cdn'ing and many more.
The main problem of the asker is that he/she does not want to waste precious time calling ng build every time a change is made.
The solution is to use ng build --watch, which builds the files and saves them in the "dist" directory immediately, and every time you change any file, the "dist" directory is updated at once.