https://github.com/devzstudio/mern-snippets
💻🚀MongoDB, ExpressJS, ReactJS, NodeJs, Redux, Axios Snippets for VSCode
https://github.com/devzstudio/mern-snippets
axios expressjs javascript mongodb mongoose nodejs reactjs vscode-extension vscode-snippet vscode-snippets
Last synced: about 2 months ago
JSON representation
💻🚀MongoDB, ExpressJS, ReactJS, NodeJs, Redux, Axios Snippets for VSCode
- Host: GitHub
- URL: https://github.com/devzstudio/mern-snippets
- Owner: Devzstudio
- Created: 2019-04-12T16:00:15.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-07-05T07:08:00.000Z (almost 4 years ago)
- Last Synced: 2025-04-11T21:07:58.994Z (about 2 months ago)
- Topics: axios, expressjs, javascript, mongodb, mongoose, nodejs, reactjs, vscode-extension, vscode-snippet, vscode-snippets
- Homepage: https://marketplace.visualstudio.com/items?itemName=devzstudio.mern-snippets
- Size: 31.3 KB
- Stars: 10
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# MERN-Snippets 🤓
MongoDB, ExpressJS, ReactJS & NodeJS Snippets to Boost the Productivity 🚀
MERN Snippets include Redux, Axios Snippets 😎
## Usage
1. Install the extension
2. You will get suggestion when you type the commands
3. Hit Tab or Enter
## Command
## MongoDB
Shortcut
Description
Output
req_mongoose
Require Mongoose
const mongoose = require("mongoose");
keys_conf
Mongo key Config
module.exports = {
mongoURI:
""
};
db.keys
Require Mongo Keys
const db = require("./config/keys").mongoURI;
db_connect
Mongoose Connect
mongoose
.connect(db)
.then(() => console.log("💻 Mondodb Connected"))
.catch(err => console.error(err));
db.find
Mongoose find
Model.find()
.then(item => res.json(item));
db.save
Mongoose Save
const newItem = new Model({
item: req.body.data
});
newItem.save().then(item => {
res.json(item);
});
db.delete
Mongoose delete item
Model.findById(req.params.id)
.then(item => item.remove().then(() => res.json({ success: true })))
.catch(err => {
res.status(400).json({ success: false });
});
db.findone
Mongoose findOne
User.findOne({ email })
.then(user =>{
})
mongoose_schema
Define schema
const Schema = mongoose.Schema;
scheme_export
Export mongo model
module.exports = Item = mongoose.model("item", itemSchema);
scheme
Mongo Schema Model Boilerplate
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const itemSchema = new Schema({
name: {
type: String,
required: true
}
});
module.exports = Item = mongoose.model("item", itemSchema);
schema_date
Date Type Schema
date: {
type: Date,
default: Date.now
}
schema_string
String Type Schema
email: {
type: String,
required: true
},
## ExpressJS
Shortcut
Description
Output
req_express
Require Express
const express = require("express");
req_bodyparser
Require BodyParser
const bodyParser = require("body-parser");
use_bodyparser
Use BodyParser
app.use(bodyParser.json());
use_cors
Use CORS
app.use(cors());
app.listen
Express app.listen server and PORT
const port = process.env.PORT || 5000;
app.listen(port, () => `Server running on port ${port} 🔥`);
app.get
Express app.get
app.get("/", (req, res) => {
});
app.post
Express app.post
app.post("/", (req, res) => {
});
exp_router
Express Router Include
const express = require("express");
const router = express.Router();
route_details
Public Route Comment
/*
@route GET api/items
@desc Get all items
@access public
*/
route_details_private
Private Route Comment
/*
@route Private api/account
@desc Get account info
@access private
*/
mod_exp
Module Export
module.exports = Router;
router.get
Get Route
router.get("/", (req, res) => {
});
router.post
POST Route
router.post("/", (req, res) => {
});
router.delete
Delete Route
router.delete("/", (req, res) => {
});
res.err
400 Response
return res.status(400).json({ message: 'Error' });
res.success
200 Response
return res.json({ message: 'Success' });
req.des
Destructure Request
const {name} = req.body
## Nodejs
Shortcut
Description
Output
server
Server.js Boilerplate
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
const db = require("./config/keys").mongoURI;
mongoose
.connect(db)
.then(() => console.log("💻 Mondodb Connected"))
.catch(err => console.error(err));
app.get("/", (req, res) => {
res.send("Server working 🔥");
});
const port = process.env.PORT || 5000;
app.listen(port, () => `Server running on port port 🔥`);
req_path
Require Path
const path = require("path");
req_http
Require Http
const http = require("http");
req_fs
Require File Server
const fs = require("fs");
req_url
Require URL
const url = require("url");
## ReactJS
Shortcut
Description
Output
imp_react
Import React
import React, { Component } from "react";
imp_store
Import Store
import store from "./store";
imp_prop
Import Prop Types
import PropTypes from "prop-types";
imp_csstrans
Import CSSTransition & Transition Group
import { CSSTransition, TransitionGroup } from "react-transition-group";
imp_provider
Import Provider from React Redux
import { Provider } from "react-redux";
rcc
React Class Component
import React, { Component } from "react";
class ExampleClass extends Component {
render() {
return (
Example
);
}
}
export default ExampleClass;
## Redux
Shortcut
Description
Output
imp_connect
Import Connect
import { connect } from "react-redux";
reducer
Sample reducer
export default function(state = initialState, action) {
switch (action.type) {
case EXAMPLE:
return {
...state,
action.payload
};
default:
return state;
}
}
store
Store Boilerplate
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.**REDUX_DEVTOOLS_EXTENSION** && window.**REDUX_DEVTOOLS_EXTENSION**()
)
);
export default store;
actions
New redux action
export const getItems = () => {
return {
type: GET_ITEMS
};
};
actions_get
Create action with axios get
export const getItems = () => dispatch => {
dispatch(setItemsLoading());
axios.get("/api/items").then(res =>
dispatch({
type: GET_ITEMS,
payload: res.data
})
);
};
actions_post
Create action with axios post
export const getItems = () => dispatch => {
dispatch(setItemsLoading());
axios.post("/api/add/items").then(res =>
dispatch({
type: ADD_ITEM,
payload: res.data
})
);
};
actions_delete
Create action with axios delete
export const getItems = () => dispatch => {
dispatch(setItemsLoading());
axios.delete("/api/items/delete").then(res =>
dispatch({
type: DELETE_ITEM,
payload: res.data
})
);
};
itemloading
Loading action
export const setItemsLoading = () => {
return {
type: ITEMS_LOADING
};
};
payload
Short for action.payload
action.payload
exp_conn
Export and wrap connect + mapStateToProps
const mapStateToProps = state => ({
items: state.item
});
export default connect(
mapStateToProps,
{ getItems }
)(ItemComponent);
## Axios
Shortcut
Description
Output
imp_axios
Import Axios
import axios from "axios";
axios.get
Axios Get Request
axios
.get("/api")
.then(res => res.data)
.catch(err => console.error(err));
axios.post
Axios Post Request
axios
.post("/api")
.then(res => res.data)
.catch(err => console.error(err));
axios.delete
Axios Delete Request
axios
.delete("/api")
.then(res => res.data)
.catch(err => console.error(err));
## GraphQL
Shortcut
Description
Output
req_graphqlhttp
Require graphqlHTTP Http
const graphqlHTTP = require('express-graphql');
imp_apolloclient
Import ApolloClient
import ApolloClient from 'apollo-boost';
imp_apolloprovider
Import ApolloProvider
import { ApolloProvider } from 'react-apollo';
## MISC
Shortcut
Description
Output
imp
import {val} from 'val'
import 'Item' from './Item'
req_cors
Require CORS
const cors = require('cors');
req_bcryptjs
Require bcryptjs
const bcrypt = require('bcryptjs')
req_jwt
Require Json Web Tokens
const jwt = require('jsonwebtoken')
req_config
Require config
const config = require("config");
fun
ES6 Arrow function
clickHandler = (e) => {
};
cl
Console.log
console.log(`data`);
cer
Console.error
console.error(`data`);
exd
export default
export default Item;
bcrypt.salt
Generate salt
bcrypt.genSalt(10, (err, salt) => {
bcrypt.hash(newUser.password, salt, (err, hash) => {
if (err) throw err;
newUser.password = hash;
newUser.save().then(user => res.json(user));
});
});
## Changelog
### 1.2.0
- Added more snippets ⚡️
- Updated Docs 📖
### 1.0.0
Initial release of MERN snippets
**Enjoy!** 🎉🎊