https://github.com/sbernheim4/premiere-mern-stack

MERN Stack Generator
https://github.com/sbernheim4/premiere-mern-stack

Last synced: about 1 month ago
JSON representation

MERN Stack Generator

• Host: GitHub
• URL: https://github.com/sbernheim4/premiere-mern-stack
• Owner: sbernheim4
• License: gpl-3.0
• Created: 2018-10-16T21:22:56.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-29T15:53:22.000Z (over 1 year ago)
• Last Synced: 2024-10-01T18:08:51.034Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 5.5 MB
• Stars: 12
• Watchers: 2
• Forks: 3
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Premiere MERN Stack

## Features

- React Router Client Side Routing

- Lazy Loading/Dynamic Imports for Each Route

- CSS/SASS/LESS

- Babel 7 + Webpack 4

- Webpack Dev Server + Express API Server

- HMR for CSS/SASS/LESS

- Live Reload for HTML/JS/JSX changes

- ESLint

- Stylelint

- PostCSS + Autoprefixer

## Getting Started

1. Run `npm i -g yo generator-premiere-mern-stack`

2. Make your project directory and cd into it `mkdir my_proj && cd my_proj`

3. Run `yo premiere-mern-stack`

5. Run `npm i && npm start` to begin your premiere developer experience

## Folder Structure

Below is the folder structure for projects made with this generator with an explanation of what each folder contains or what the file is for. Some

```

├──proj_root/

    ├──public/                     # This is where files built with webpack are kept

    ├──server/                     # Server side code including API routes

    |   ├──api.js                  # Where requests to `/api` are handled

    |   ├──clientSideRoutes.js     # Define client side routes

    |   ├──index.js                # Entrypoint for your server

    ├──src/                        # Where your components live

    |   ├──Navbar/                 # A component called `Navbar`

    |   ├──Routes/                 # A component called `Routes`, sets up react router for client side routing

    |   |   ├──404/                # Component for a 404 page

    |   |   |   ├──404.jsx

    |   |   |   ├──404.scss

    |   |   ├──Home/                # Component for the home page

    |   |   |   ├──Home.jsx

    |   |   |   ├──Home.scss

    |   |   ├──Subpage/             # Component for /subpage

    |   |   |   ├──Subpage.jsx

    |   |   |   ├──subpage.scss

    |   |   ├──index.jsx           # Declare all your `Route`s here and the components they map to

    |   |   ├──LazyLoadRoutes.jsx  # Allows you to lazy load your route components to reduce bundle size

    |   ├──styles/                 # Global styles folder

    |   ├──index.jsx               # Entrypoint, this is where react binds the component to a div with an ID of root

    ├──nodemodules/                # A black hole

    ├──.babelrc                    # Defines settings for babel transpiling

    ├──.env                        # Defines environment variables

    ├──.eslintrc                   # Defines rules for ESLint

    ├──.gitignore                  # Files to be ignored by git

    ├──.stylelintrc                # Defines rules for CSS/SCSS/LESS linting

    ├──HTMLTemplate.js             # HTML template used by webpack to generate static HTML page

    ├──package-lock.json           # Wizardy

    ├──package.json                # Info on your project and its dependencies

    ├──postcss.config.js           # Defines rules for PostCSS

    ├──webpack.config.js           # Defines webpack config

```