I am working on a project where in my front end I'm using angular 2 and my back end node.js.
So basically I want my back end to talk to firebase and return the result to my front end (angular 2) how can I deploy these two separate projects to firebase?
Thank you so much pardon my English
First of all, it's not compulsory that if you are using Firebase to store data then you must use Firebase for the frontend and backend deployment too. You can use other Services like heroku, which is much easier to work with.
If you still want to work with Firebase. here's what you can do.
Run ng build in your angular 2 code. This will create a new dist folder in you application. Serve the contents of the dist folder as static.
You can follow the complete procedure steps here https://firebase.google.com/docs/functions/get-started
Related
I have an Angular project with NodeJS backend. I am confused about how to deploy my project on a remote server? I decided to use webpack because of it's simplicity, so I ran the following command:
ng build --prod
And it made a folder called dist for me. I think I must copy the content of this folder into the public folder of my NodeJS backedn server, but I am not really sure if I do the right thing?
Should I change other configuration of my frontend or backend codes too? Or just copying dist folder into the server's public folder should solve everything?
You have a very good documentation guide by Angular: https://angular.io/guide/deployment
And yes, you should copy dist/yourproyect (Angular compiled to HTML+CSS+JavaScript+Assets) to any web server you want to deploy it.
For isolation purposes (and maybe configuration), I'd recommend to put front and back in different folders. But you can deploy it within NodeJS.
In short: A web server Apache/Nginx/IIS/GitHubPages/Firebase/etc for Angular and PM2 ( https://pm2.keymetrics.io/ ) to launch your NodeJS. But depending on your expected load, you may want to choose one server type or another.
Anyway, if you specifically want to serve Angular through NodeJS, I'd recommend this tutorial (2016, maybe bit outdated, but it will help): https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
I'm a building a web application with Next.js/React.js + Node.js.
I would like to deploy my application not separately but into one server(e.g. Heroku).
How could I do this and make it work?
Using package npm i -D concurrently you can run your both projects on same server.
Use this link fo reference
https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-concurrently-2oac
Never used next, but I had a similar problem last night and tried like 5 different things to no avail.
Found this today and walked thru his demo and got a better understanding of what's going on and was able to restructure my project to get it to work. This post walks thru how to have Express serve your React project using heroku-postbuild.
Other things that tripped me up: I needed two package.json files (one for Express and one for React) and I didn't have my express app directory set to find index.html
https://daveceddia.com/deploy-react-express-app-heroku/
I'm learning how to deploy a web site to heroku.
My web app has a nodejs project and one mysql in the server side, a reactjs in the client side.
Can you show me the steps that I need to do? Because I'm new to this.
Thank you very much
Here is a step by step guide.
Put your app aside for a few moments and follow these:
To learn how to deploy a nodejs
https://devcenter.heroku.com/articles/deploying-nodejs
Now learning how to add a mysql database
https://devcenter.heroku.com/articles/cleardb#provisioning-the-shared-mysql-add-on
This will teach you how to deploy a 'raw' react app
https://blog.heroku.com/deploying-react-with-zero-configuration
Now, it's all about how you want things to be. You can have a route on your nodejs app that serves the index.html with the react app or a separate app for nodejs and for react. You should probably make them separated, just to keep things organized, but since it's your first deploy and you're probably using it as a hobby or to learn, any way is correct as long as you get it to work. Then you can build on top of that, split the apps into two, or maybe host the react app on aws s3. Who knows?
I am developing an application with node.js and express.js hosted on firebase using firebase functions, and development in typescript. I would like to use react.js as client side framework. I set up node + express + firebase using:
firebase init hosting
firebase init functions
However, there is no obvious way to set up react front end framework using create-react-app ... given the current project setup. In particular, create-react-app seem to create its own node_module and index.js. I found this: https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0
It is a bit ad-hoc. In particular, it is launching a dev server using yarn, but I am using firebase serve ..., and would like to keep it that way. Do these different frameworks play together at all? #webDev
You can definitely use React and Firebase together, but merging the complex templates generated by starter kits for each may be more trouble than it's worth.
You will likely need to pick which generated template gives you the most value (whether it be from firebase init hosting or create-react-app) and then work on standing up items from the non-chosen ones piece by piece.
If you really want to use firebase serve you will be losing hot-reload and other development time benefits that create-react-app provides, as firebase serve internally uses superstatic (repo) which is a dev server for hosting static files.
You can use React with such a setup by npm install --save react react-dom and then using React as normal, but it's very likely that you will want a toolchain between your source and the static files that firebase serve serves (given your use of the typescript tag, I'm assuming you at least need to transpile .ts to .js), and you will then need to set that up on your own if you simply want to use firebase-serve.
In my opinion, the dev toolchain that you get through create-react-app will provide more immediate value for your specific situation than wanting to stick with firebase serve. Is there any specific reason you feel glued to firebase serve?
(Not using firebase serve in no way causes issues running firebase deploy --only hosting later when you want to deploy to firebase hosting, as long as your hosting config points to the directory where npm run build outputs your built files.)
I'm building a Nodejs + Angular2 project for the first time and stuck with architecture design issue.
There are following possibilities:
Develop Angular2 project separately, build and copy the files into Nodejs project
Develop Angular2 project from within Nodejs project (say from public folder)
Run two servers for Angular2 as frontend and Nodejs as backend (how to do this in shared hosting then? AWS is fine)
Using yeoman for creating projects for both Angular2 and Nodejs.
Which is the best option?
Any other idea?
2 is basically the solution. The work flow goes like this:
Start Angular Development Server.
Start NodeJS server.
Once you are ready to go live:
- Compile Angular and build out into a public folder using ng build. This folder will be accessible to the public and holds html files, javascript files, etc.
- Then, you use Nodejs to direct clients to those html files. When you use NodeJS or any other backend, this is typically how you will serve the Angular 2 files. It is also possible to develop Angular 2 SERVER SIDE instead, however, this is a bit harder and I wouldn't recommend it unless working with another framework entirely. Here is a really great tutorial that walks you through it:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli