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.
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"));
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
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'))
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'));
});