How to deploy vue cli project to aws lightsail - node.js

I am a beginner at deploying web apps, however I have some experience developing them. I just finished a project I amde using node, express, and vue. I am trying to deploy it to AWS Lightsail. So far what I have done is create a nodejs instance and a MySQL database on lightsail. I have a backend folder connects to the database as well as some API's that are used in the front end. I also have a front end folder which contains the entire vue project. How shold I go about deploying this to lightsail? Are there any good references or videos I could use? I tried following the AWS documentation but it wasnt very helpful. Any help would be appreciated.

Related

Hosting Nodejs Mongodb website with frontend but not React

I'm very new in MERN stack development, I made a blog website with backend used HTML CSS JS NODEJS & MONGODB. and I want to host in netlify and heroku.
Tried So many times but got error.
My Github repo link :
here
Can any one completely explain how to host ?
If you're just getting started with hosting your apps, try a newer generation app hosting platform where you just connect your GitHub repo and it does everything else for you.
Node.js and Mongo is perfect for Adaptable.io. The free tier includes a Mongo database. Here's the guide to deploying a Node.js App with MongoDB. You could also try Render but they don't have MongoDB.

How to deploy ReactJS frontend and NodeJS/Express backend from the same project folder?

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.

Deploy Nodejs + ReactJs to 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?

one cloud server and running multiple node and mongo project

I bought a cloud server from digitalocean. I have a problem
I wrote a project that using node js web services and mongodb database I'm trying to setup node js and mongo db its okay but my problem is how can I deploy my node js app which will use mongodb and using my custom domain.
Now my domain at natro.com I can't complex with all of them any tutorial that you have known or something else can be helpful?
I don't know much about server management.
My server can be ubuntu or debian, doesn't matter, depends on tutorial or some blog post.
First step is add your domain in Network area of DigitalOcean Panel. Use this tutorial.
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-host-name-with-digitalocean
Now, follow this tutorial for deploying your nodejs app with nginx
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04

deploying angular2 and nodejs project on firebase

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

Resources