GitHub repo: https://github.com/byeung2019/MIQSTechnologies
Hey guys,
This is my first time deploying a website online, so I'm confused and anxious of where to even begin.
My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API (CryptoCompare).
My website works locally.
My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.
Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.
However, since this is my first time deploying, I'm confused about the following:
How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.
Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.
Thank you so much!
First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.
After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json
You have to deploy your backend app as it is and there is few options then you can follow most common is,
Using a proxy like nginx
Host your build inside the node backend
Here is a guide how to host your apps using nginx for nodejs and angular
https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular
Hope you will get the idea.
Related
I am following Ben Awad's wonderful tutorial to build a fullstack
app using Next.js, Express, Typescript, and GraphQL. Everything works smoothly locally, but I have run into a barrage of issues trying to deploy to Heroku. I would really like to deploy both server and client to Heroku as one app, and have Express serve the frontend files as well as be the backend.
monorepo
- web
- package.json
- server
- package.json
package.json
To my understanding, this is possible using Next's custom server option, which I have integrated in my server.js file. My problem is when deploying to Heroku, it doesn't detect React as a dependency for the backend so while the deploy succeeds, the app crashes when I try to access it in the browser. I have tried a few things to resolve this issue - having two copies of React in frontend and backend, respectively, only leads to more problems (understandably so). I have tried keeping one copy and using npm link to point to the module, but it only works locally. I've tried changing the webpack config as well but it doesn't seem to register. I tried defining the custom server as a util in the frontend and import it in server.js, but the import is always undefined, which makes sense so I moved it back.
I'm still new and have many misconceptions about how Next.js works, especially when coupled with a custom server, so I might be doing something fundamentally wrong. Is there anything I'm missing, or is it better to split the app into two Heroku apps and push one subtree into each?
The source code can be found here, but I will be probably rolling back because it has become very messy.
I know there are other ways to do this I just don't want to give up quite yet.
From udemy React courses i could see Brad Traversy using create-react-app with node.js backend server and Andrei Neagoie using only create-react-app without node.js server to develop a full stack product.
I am seriously confused with when to use what?
Can any one explain me between these two scenarios? Please?
This is mostly related to how you want to structure your code. You can either :-
Set up your front-end and back-end code together. So, in your script tags in package.json, you will have something like 'nodemon server.js && react start' (refer package.json for exact syntax) to start both front-end and server with 'npm start'
Setting up front-end and back-end separately.
This is preferred for separation of concerns. In this case, you would start each separately.
Also, your front-end shouldn't be concerned about how your backend code has been written. It should only be dealing with backend using an API.
For ex: if in future, you wanted to change to Deno.js instead of node.js server, you would have make some modifications in package.json if you had front-end and back-end code written together in folder.
As far as deployment is concerned, in this case also, it will help if you kept the front-end and back-end code separately so you can deploy them separately.
React is used for frontend, while node.js is used for backend.
I think your confused because one is using react with node.js the other is using react alone.
Well React can be used for other backend other than node.js, like php for example.
This means you can create an app using react/php.
The reason Brad Traversy is using create-react-app with node.js because he wants to use node.js for his backend.
While Andrei Neagoie is using create-react-app without node.js because he either:
Don't want to use any backend.
He will add backend later on.
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 suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.
Hi i am trying to understand the installation of Angular JS v2. I have read a lot of tutorials and right now i am very confused some are using webpack to create server and using the application, in some examples they use generators and all the generated files are in TypeScript then.
I just want to use Angular JS as frontEnd and express app as an API (RESTFUL) but i don't know how to configure it. Do i have to create two different servers for it or can i use same express server to serve index.html of angular 2 application.
Kindly provide your suggestions, any tutorial link or any direction where i should dig in. Any help will be appreciated.
Thanks
You need a frontend server that is running Angular2 and a NodeJS backend server that your frontend makes HTTP requests to.
To get an Angular2 server up and running either use the Angular2 quickstart project (as referred to throughout the Angular2 docs) or use Angular CLI (this is an npm package). The Angular2 docs use SystemJS. Angular CLI uses Webpack.
For your backend server, use expressJS (another npm package).
First step for you is to install NodeJS !!! :)