Git Product home page Git Product logo

mevn-cli's Introduction

Light speed setup for MEVN stack based web-apps

Build Status npm version Downloads PRs Welcome code style: prettier Mentioned in Awesome-Vue Mentioned in Awesome-VuePress Follow on Twitter

Buy Me a Coffee


Chat: Telegram

Donate: PayPal, Open Collective, Patreon

A CLI tool for getting started with the MEVN stack. The acronym “MEVN” stands for “MongoDB Express.js VueJS Node.js”. It offers a super-simple boilerplate template and additional utilities for building a MEVN stack-based webapp. It takes away the hassle of setting up the local development environment which may become a nightmare especially for beginners who are just starting.

Installation

Prerequisites

  • npm is a package manager for the JavaScript programming language.
  • node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
  • git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development.

Quickstart

npm install -g mevn-cli
mevn init <appname>

Available Commands

MEVN-CLI offers the following set of commands:-

command description
mevn init <appname> Scaffolds a MEVN stack project in the current path
mevn serve Serves the client/server side template locally
mevn add [deps] [--dev] Adds additional dependencies as required on the go
mevn generate Generates component files for the client and CRUD boilerplate template for the server based on MVC architecture
mevn codesplit Lazy load components as required
mevn dockerize Serves the webapp as multi-container Docker applications
mevn deploy Deploys the webapp to a cloud service of choice
mevn info Prints debugging information about the local environment

Features

  • It allows Developers to build webapps with ease in which all the local environment setup is being taken care of. All they have to do is to focus on writing actual code.
  • The whole project is done in modules(thanks to ES6 syntax) which enhances user readability and leads to compact code.
  • MEVN-CLI simplifies developer workflow by generating the required boilerplate and automating redundant tasks.

Contributing

Before contributing a change to this repository, please first discuss the change you wish to make via issue, or any other method with the owners of this repository . Take a look at the Contributing Guidelines to get a better picture regarding the codebase and project structure.

How do I contribute?

  1. Ensure you have no "dummy" files left, if you do then add them to the bottom of .gitignore.
  2. Fork and clone our repository.
  3. Make your life-changing changes.
  4. Run npm run build which generates a lib directory with the transpiled es5 code.
  5. Type in npm link to test everything works fine. (Now you've access to the mevn root-command.)
  6. Run tests locally before commiting with npm test. (If you're having issues running tests locally, then you can commit and use GitHub actions ci in your own fork. All tests should pass.)
  7. Commit and push your changes.
  8. Make a detailed pull request.

npm link creates a symlink in the global folder making the mevn command globally available within your local development environment

Why should I contribute?

Contributing helps people and simply makes the world a better place, Without contributors this project would cease to exist.

How should I write a commit message?

This project uses Commitlint to check if the commit messages meet the conventional commit format. The full pattern is:

type(scope?): subject #scope is optional

body? #body is optional

footer? #footer is optional

Following that pattern, your commit messages should look like these:

feat: activate open collective
chore: correct typo

It should be "guest" and not "gest"
refactor(cli): drop support for node 6

BREAKING CHANGE: you will need to update your node version to keep using this CLI
This closes #123

What if I cannot code or do not like it?

You can always write documentation, most repositories lack in it.

What is next?

Nothing! You're done and ready to get coding!

Versioning And Help

option description
-V, --version Check CLI version
-h, --help Get help and check usage

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

mevn-cli's People

Contributors

agarwalrounak avatar ajomadlabs avatar alan755 avatar anto-christo avatar aquibbaig avatar arrlanxcidic avatar creatoon avatar danivijay avatar darrylpargeter avatar deniosj avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar gautamkrishnar avatar haxzie avatar jamesgeorge007 avatar jamesjose03 avatar kamerk22 avatar klauskpm avatar konsvasi avatar meroware avatar monkeywithacupcake avatar nathfreder avatar open-source-explorer avatar pupupulp avatar ritwik12 avatar santoshyadavdev avatar scriptonist avatar snoopysecurity avatar thakurkarthik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mevn-cli's Issues

Add vue-routing

All the dependencies such as vue-router has to be linked up on prompting the user whether he would require it or not.

Adopt commitlint standards

We're gonna follow commitlint standards while framing up the commit messages.
Refer these guidelines.

  • install commitlint-cli as a dev-dependency.
  • configure pre-commit hook with husky.
  • update docs to include a dedicated section regarding how to write commit messages based on the standards.

Contributors guide

Add appropriate contributors guide, listing out the steps involved.

  • Fork the repository
  • Make your required changes
  • Commit those in a separate branch
  • Submit a PR for review

Provide support for prisma DB tool

Prisma replaces traditional ORMs and custom data access layers with a universal database abstraction used via the Prisma client. It provides Type-safe database access including filters, aggregations, pagination and transactions.
The necessary configurations is to be automated as required.

Quick start

Update docs with the following content:

   mevn-cli init <your_new_webapp>
   mevn-cli run:client
   mevn-cli run:server

Install heroku-cli on the go

Present scenario

Currently, mevn deploy expects to have access to heroku within the machine. The process crashes with a default message if otherwise.

What is to be done

Handle the failing case such that a custom message is shown instead. Also, there should be a prompt asking the user if he/she should get it installed (Y/N) and go forward with the installation.

Capitalise Cli ?

mevn cli - mozilla firefox_011

CLI is an Abbreviation so It should Ideally be capitalised right ?

Thoughts 🤔

Add option to generate new components

Add required command, for instance mevn-cli generate:component <new_component>

This command should help developers to create a vue-component in the front-end inside the components folder.

Unhandled Warning

Repeated execution of server commands like:-

mevn-cli create:controller
mevn-cli create:route
...
will create the file but the repeated execution of these commands will note prompt warnings like
"The file already exist and do you wish to create anyway" and receiving user input as yes/no.

Implement GraphQL

For now the server part supports only traditional RESTful API which has to be extended with GraphQL.

Integrate SQL databases

Currently MEVN-cli only supports MongoDB and with this addition we could expand it to allow integration for SQL Databases. Also, the necessary configurations for ORM's like sequelize is to be automated.

Warn the user if docker is not installed

Present scenario

Currently, mevn dockerize expects to have access to docker-compose within the machine. It crashes yelling that docker-compose not found which is a default message as thrown by the system.

What is to be done

Handle the failing case such that a custom message is shown instead. Also, there should be a prompt asking the user if he/she should get it installed (Y/N) and go forward with the installation.

Linux/Mac

Upgrade execa

The package execa has so many updates and deprecated options.

Shouldn't this be updated?

Add Project Hierarchy

Add a section that throws light into the overall view of the project structure.
This may include the various directories and files included in a hierarchical manner.

Add provision to have test runners

Add prompts such that user is required to decide whether he/she require any sort of test runners (Jest, Ava, Mocha) for the project and automate all further installation procedures.
This is the file to work with: init

[Question] Placement of mevn.json file

Hi,
I have some doubts regarding the mevn.json file.

If I'm not wrong, the mevn.json file contains info regarding a particular project. Then why is it outside of the project directory, shouldn't it be inside the project directory since it is specific to it?

Due to the placement of mevn.json file outside the project directory, the user cannot create more than one project in the same location. Also, due to this, the user currently has to execute project-specific commands (like create: component, etc) outside of the project directory, ideally those commands should be called within the specific projects.

May I know the reason and thought process behind the placement of mevn.json file?
Thank you.

Warn the user if git is not installed

Present scenario

Currently, mevn create:git-repo expects to have access to git within the machine. A default error message is thrown.

What is to be done

Handle the failing case such that a custom message is shown instead. Also, there should be a prompt asking the user if he/she should get it installed (Y/N) and go forward with the installation.

Linux/Mac

Add axios dependency

Ask the user whether he requires axios to link up the client and server part. If so, add the required dependencies and couple of boilerplate code.

mevn-cli website homepage

As per now what we have is just the documentation part done in vuepress. We require a homepage that will serve the purpose of an intro section having a brief description of the tool.

For this you are required to work with the README.md file within docs directory.

Add Proper Comments

Code base requires proper comments such that it will help make the code base more easy to ready
and more over help new contributors to get started easily

Acknowledgements section

Add appropriate content listing out inspirations. You can find a docs directory with a Readme.md file. Just have your changes there 👍

Implement code splitting

The user should be able to code split a particular component as specified using dynamic imports.

For instance, mevn-cli codesplit <component> should change the content within the routes file of the respective component to the code splitting way.

Update commands section within docs

  • Remove Server Commands section.
  • Rename General Commands to Available Commands.
  • Add missing entries within the list of Available Commands.
  • Change mevn run client/server to mevn serve

This is the file to work with: README

Refer Repo Readme

Write unit tests

There is an action handler for each command. You can also find a couple of helper functions consumed by the respective handler. We need to write unit tests to ensure that the helpers serve their purpose.

Add validation for client

Ask the user whether he would require pre-available validation plugins like vee-validate and add those dependencies.

Add SSR option with Nuxt.js

Currently the user is welcomed with 3 options (Boilerplate):

  • Basic
  • PWA
  • GraphQL

As a fourth option provide support SSR capability with Nuxt-js

Further he/she should be prompted to go with either Universal / SPA

Adding UI for MEVN-cli

With this we plan to create a ui for MEVN-cli tool which will help developers to add packages and integrations, basically execute different commands used in cli via a ui which would be running locally.

Add vuex state management

Make the provision to add state management within the client part which asks the user whether he would require vuex for the current project.

Add changelog

Add changelog (version-history) to the Docs listing couple of recent commit history.

Add vuex configuration

The vuex package can be added via the add:package command. It creates a store.js file with the initial boilerplate within client/src directory.

The new store.js file has to be imported and passed on to the Vue instance. Importing store file is already done which still is not that perfect. If the same command is being repeatedly executed, content repeats (import store from './store') within the main.js file which has to be handled. Also, the store being imported has to be passed in as an arguement within the Vue instance.
This is a typical main.js file:-

import store from ./store;
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Provide support for webpack 4

Migration from webpack v3 to v4 requires a lot of manual configurations which has to be automated with a particular command.

Add Gifs within Docs

Add Gifs within the Docs part demonstrating each command with description for each section.

Various sections may comprise:-

  • Initialising the project
  • Create routes
  • Create model file
  • Create controller file
  • Create config file
  • Running server and client

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.