![]() ![]() End-to-End Flowīelow is a brief end-to-end application flow: Figure 1: End to End flow of the applicationġ. Once the user clicks the button, application will save the name in the database and also it will be displayed in the list. Users can enter the name and click the Add button.ģ. There is a text box on the top of the table where the user can enter the name to add to the list. User clicks on Web Application URL Link, and when the page loads in a browser, the user will see a list of names if there are any names in the database, else an empty single-column table with header Name is displayed.Ģ. The application that we are creating has the below use case:ġ. ![]() This hands-on lab is about deploying a MERN stack on Docker.įirst, we will deploy a MongoDB container, then a container with ReactJS, NodeJS, and ExpressJS code that connects to MongoDB, and then do end-to-end testing.įor your convenience these softwares are pre-installed. NodeJS: Quick and easy-to-learn server-side JavaScript environment.ĮxpressJS: NodeJS package (something like a plugin) which can work as a web server. It encapsulates view with event handlers and other functionalities inside a component and helps faster development. ReactJS: A declarative way of developing a web application. The data is stored in Collection, which is analogous to Table in the relational database. As most of the application uses JSON form of the data model, this database gives immense power in managing application data. MongoDB: A NoSQL document DB that stores data in the form of JSON. Each component in this stack has its usage given below, MERN is a short form for MongoDB, Express, ReactJS and NodeJS. ![]()
0 Comments
Leave a Reply. |