Microsoft Stack
Full Stack Development Tutorial: Front-End and Back-End
Welcome to this comprehensive tutorial on full stack development! In this guide, we will cover both front-end and back-end development, providing you with the skills necessary to create dynamic web applications.
Prerequisites
Before diving into this tutorial, you should have a basic understanding of:
- HTML, CSS, and JavaScript for front-end development
- Basic command line usage
- Node.js and npm for back-end development
- A relational database (e.g., MySQL, PostgreSQL) or NoSQL database (e.g., MongoDB)
Front-End Development
1. Setting Up Your Environment
To get started with front-end development, set up a simple project structure:
/my-app
/index.html
/styles.css
/app.js
2. HTML Structure
Here's a simple HTML template for your application:
My Full Stack App
Welcome to My Full Stack App!
3. Styling with CSS
In styles.css, you can add styles to enhance the look of your application:
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
4. Adding Interactivity with JavaScript
Use app.js to add functionality:
document.addEventListener('DOMContentLoaded', () => {
console.log('Welcome to My Full Stack App!');
});
Back-End Development
1. Setting Up Node.js
Ensure you have Node.js and npm installed. Initialize your back-end project:
npm init -y
2. Installing Express.js
Install Express.js to create your server:
npm install express
3. Creating a Simple Server
Create a file named server.js:
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.send('Hello from the back end!');
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
4. Connecting to a Database
Choose a database (e.g., MongoDB). For MongoDB, install mongoose:
npm install mongoose
Then, connect to your database in server.js:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.log(err));
Conclusion
Congratulations! You have now set up a simple full stack application with front-end and back-end functionality. This tutorial is just the beginning; explore more features and frameworks to enhance your skills!
Happy coding!
Hello, React!
Hello, Angular!
` <})Hello, Angular!
` }) export class AppComponent {} const express = require('express'); const app = express(); app.use(express.json()); app.get('/api/users', (req, res) => { { {5. Front-End Frameworks
1. React.js
React is a popular JavaScript library for building user interfaces. Here’s how to set it up:
npx create-react-app my-react-app
cd my-react-app
npm start
2. Angular
Angular is a powerful front-end framework by Google. Here’s a brief setup guide:
npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve
6. Back-End Frameworks
1. Express.js Advanced Routing
Learn how to create more complex routes and middleware:
const express = require('express');
const app = express();
app.use(express.json());
app.get('/api/users', (req, res) => {
// Fetch users from database
});
2. Authentication with JWT
Implement user authentication using JSON Web Tokens:
const jwt = require('jsonwebtoken');
app.post('/api/login', async (req, res) => {
const user = await User.findOne({ username: req.body.username });
// Additional authentication logic
});
7. Database Management
1. MongoDB Basics
Learn how to perform CRUD operations with MongoDB:
const mongoose = require('mongoose');
// Connect and define model
const userSchema = new mongoose.Schema({
username: String,
password: String,
});
const User = mongoose.model('User', userSchema);
8. Deployment
1. Deploying Front-End
Deploy your front-end application using platforms like Vercel or Netlify.
2. Deploying Back-End
For deploying your back-end server, platforms like Heroku or AWS are popular choices.
9. Conclusion and Next Steps
Congratulations on completing this full-stack development tutorial! Here are some suggested next steps:
- Learn more frameworks.
- Build personal projects.
- Explore DevOps practices.