My objective is to create a web-app using MERN or MEAN stacks and host it on Amazon.
Now, I need help with the logic/structure/architecture because frankly, at the moment I don't even know where to start. I've been a web developer a couple of years, using PHP, javascript jquery and other web technologies but never dived into full stack solution development. Now I wanna give it a try. I'm still learning mean/mern components but I'm pretty sure I'll get there.
What I wanna achieve is simple: a web-app (really really simple website) where if I (the admin) go to a specific url (for ex. mywebsite.com/admin) I can login and add stuff similarly to a Wordpress website but much more simplified. I need to add a title, a description a button and maybe 1-2 pictures, save that information into "a product" and generate a custom URL for it so that when someone clicks mywebsite.com/productnr1 it will go to that specific product with the information I added previously. In a few words, I want something similar to Wordpress but much more simpler using one of the mentioned stacks.
Is there anything like this on the market? Can someone suggest a point to start? My main problem here is the http protocol and how to generate custom links for products.
Hey! Let me begin by asking you, is there any specific reason why you want to use AWS? If there is something, I might be able to help you with some alternatives, if you please! :)
Alright, I would recommend you to go with the MEAN stack; apart, you change a the following:
- (M)ongoDB to MySQL
Since you haven't told us about your experience in MySQL, we can't really gauge. :( Following the general consensus, I would be against using NoSQL as it might prove to be a little overwhelming. You are more than good with MySQL, especially if you have such a small set of data.
You might want to break this down into two parts:
- the **backend** -- Handles all the data processing, server-side logic;
- the **frontend** -- Handles all the view-related logic; stuff like showing the UI to the user.
For the backend, you'd use Mongo/MySQL + Express + Node. Here, Mongo/MySQL are your data aggregation tiers; Express is the framework for creating the API (provides some really easy to use abstractions, and whatnot); Node is the V8-based "framework" which uses JavaScript to run code on the server-side.
You can follow the RESTful paradigm. It simplifies a lot of the code, and is really simple to maintain. If you need help with this, I will be more than happy to expand this answer to include a little bit about that as well.
/admin is easy using the ngUi.router module. Very simple, very efficient, very flexible.
Lastly, "problem is the http protocol.... links for products" Use REST.
So, say you had a product with an ID in the database of, say, 1. Now, since you come from a PHP background, you must be using something like
product.com/api/productfunction=get&id=1
And (hopefully) this returns JSON.
This architecture seems really simple when you are considering small scaled application, with not many operations. However, maintaining this gets really tedious, really quick. With 4 operations (Create Read Update Delete), this is fine; however, when you want sorting options, and pagination, this might get really complicated. And if you wanted some sort of authentication/authorization routine, this will just blow up.
And hence, I introduce you to REST. Or Representational State Transfer. Very simply put, we use HTTP Verbs (GET, POST, PUT, DELETE) for the CRUD operations on a single route.
Let's see how the example above would translate to REST:
http://product.com/api/product/1 (HTTP GET)
Or, to get all products:
http://product.com/api/product (HTTP GET)
Create - POST
Read - GET
Update - PUT
Delete - DELETE
Now, you have converted that tedious URL to something really manageable. You're welcome! ;)
In REST, we have a noun (say, a product), and a route attached to it: endpoint/<noun>. And you operate on them!
Personally, for a webapp like this, I map my URLs in the following way
`http://api.name.com/`
`http://app.name.com/`
Where <app> serves as the domain which points to our AngularJS application, and <api> points to our Express backend (I use a Express equivalent: Hapi.js)
Then, for versioning, I have api.name.com/v1/<verb>
I have written multiple/tude answers on this topic. However, if you want to know something specific, I would be more than delighted to help you! :)
I hope this helps! :D
Your app logic seems fairly simple. Lets break your question into 2 parts:
1. How to achieve app requirements
Start with basic Express on Node. Create the route for the login page at
http://mywebsite.com/adminlike this:
app.get('/admin', function(req, res) { // Render login form });Now you need to validate the username password from the form, and accordingly redirect the user to login failure or success page (or your "Add a product" page). If you are routing the user to the product addition page, make sure you use some middleware like Passport so that only an authenticated user can view that page.
app.get('/product/add', isAuthenticated, function(req, res) { // Render product addition form });This add a product page can have the form with all your requirements. Since Express 4.x has dropped built in middleware for multipart form data (used for file uploads), you will have to use Multer or an alternative.
app.post('/product', multerInstance.array(), function(req, res) { // Get post data from the form at /product/add });Your "products" table/collection should auto-assign an ID to every product added.
Now you need to create the route for the product display page. You could have a route like "/product/:id" and handle the id param, so that "mywebsite.com/product/id1" shows data for product with id "id1".
app.get('/product/:id', function(req, res) { var id = req.params.id; // Render product page based on id });This is the most crude way to make your app. Please consider reading up more about express, routes etc before putting this into a production environment.
2. Hosting on AWS
Your app would typically be hosted on port 3000. AWS provides extensive solutions for domain name resolution, load balancers and port forwarding.
First create your EC2 instance and point an Elastic Load Balancer (ELB) to it. Your Node app is on port 3000 but you want to expose it via port 80 on your domain name. Your ELB can take care of the port forwarding. Add listeners like this :
Now point the A record of your domain to this ELB (A record will be of "alias" type on Route53):
Thats it! You have now deployed your app on AWS!
Extra You can use nginx on your EC2 for port configuration, cache control and additional power ups :)