npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-fs-mern

v1.0.2

Published

A fully function MERN stack generator running on the latest and greatest thats easy to get started with

Downloads

7

Readme

Premiere MERN Stack

About

Simple enough to build on, complex enough to take you all the way.

This stack gets you up and running with dev absolutes. Webpack Dev Server for HMR integrated with an Express API server. Mongoose and MongoDB for your database, Code splitting at the route level for small bundle sizes, elegant linting with smart defaults for consistency and all the other goodies that come from a MERN stack using the latest and greatest. See the full feature list below

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
  4. To connect to MongoDB simply add to the .env file DB_URI=<YOUR_URI_HERE>
  5. Run npm start to begin your premiere developer experience

Docker Support

npm run docker will create and run the site inside a docker container. Port 3000 is mapped so you can continue to view the running container locally.

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 DB models, API routes etc
    |   ├──db/                     # Where all DB models and schemas are stored and registered
    |   ├──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/docker
    ├──.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

Configuration

There are many ways you can configure this stack to suit your specific needs

Babel

  • You can configure all your babel plugins via the .babelrc

Stylelint

  • Set your preferred order for styles in .stylelintrc (achieved via stylelint-order package)
  • Whitelist or blacklist units that are allowed
  • Control if tabs should be done with spaces or tabs
  • And many more

ESLint

  • ESLint lets you customize and enforce certain rules for your JS code like
  • Enforcing === always instead of ==
  • Disallowing use of var keyword
  • And many more