Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-1

mean

In this blog, I am explaining about node and MySQL connections using sequelize, ORM & Models Creation using sequelize, jwt for user authentication and angular 6 for the frontend.

First, we need to install Node, Git, any Editor you like Ex: Visual studio code, Atom, Notepad++ etc(I am using Visual studio code).
Download links are given below:
Node: https://nodejs.org/en/download/ (After installation we get node package manager to get node modules).
Git: https://git-scm.com/downloads
Editor: https://code.visualstudio.com/

Install latest Angular Cli Globally using the command.

npm install -g @angular/cli

Create Angular Application using below command.

ng new

Ex :  ng new frontend

Frontend folder created with angular sample code.
Goto that folder and start the sample application using ng serve command.

cd frontend
ng serve –open

Install Bootstrap, jquery and font awesome using below commands.

npm install --save bootstrap 

npm install --save font-awesome 

npm install --save jquery

Add below lines in this file src/styles.css

@import “~bootstrap/dist/css/bootstrap.css”;
@import “~font-awesome/css/font-awesome.css”;

Add the below lines in angular.json file.

“node_modules/jquery/dist/jquery.min.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”

angular-bootstrap

add component named header for menus and logos

ng g component components/ui/header

then go to src/app/components/ui/header/header.component.html

 

 

Create footer component using below command

ng g component components/ui/footer

then go to src/app/components/ui/footer/footer.component.html

footer
header and footer

In the next session, I will explain about node js server creation and sequelize cli.

Thanking you.

Git Links:

Front End:  https://github.com/iamchandu/angular6-signup-login-frontend

Backendhttps://github.com/iamchandu/SampleREST-APIsUsing-Node-JWT-Sequelize

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: