webdevenv/create-dev-env

DevEnvironment

You can use it for

• Static pages
  • React (optional)
  • Vue (still on development)
• Node.js
  • API
  • Web Server
  • CLI
• Node.js API serving static pages using React (optional)

Easy Guide

Download by order

• VSCode
• Settings Sync

In VSCode

• Press F1 and go to

  • 'Sync: Advanced Options'
  • 'Download settings from public Gist'

• Press F1 again and go to

  • 'Sync: Download settings'
  • Write this code 6f8c59082e58b005f1dd38a7236eeeaf

Now just download the boilerplate code you wish to use!

• Open terminal on the root directory and write:
  • npm install
• For the instructions write on the terminal:
  • npm start help

It's done!

You will see a similar file structure to this one depending on the project you choose!

Guide

For a more advanced user

• Make sure you have EsLint installed in your Code Editor
• Enable eslint.autoFixOnSave
• Change your development port on the PORT variable inside package-scripts.js

Note: If you have prettier installed in your code editor then disable it for Javascript

• "prettier.disableLanguages": ["javascript"]

If you want to host your own MongoDB server go to the package-scripts.js find the line responsible for MongoDB and add the path for your MongoDB

After that just run npm start mongodb

Development setup

Depending on the boilerplate project you choose you will have some or all of these options

To run any of these commands write npm start followed by:

• help - See all commands available for current project
• build - Build Node or DOM or both projects for production
• node - Development mode for Node.js
• node.build - Build Node.js project
• node.build.run - Build Node.js project and run server
• node.test - Mocha test
• node.test.watch - Mocha test watcher
• node.debug - Debug Node.js project
• dom - Development mode for DOM
• dom.build - Build DOM project
• dom.build.run - Build DOM project and run server
• eslint - Run Eslint Fix
• localTunnel - Expose localhost port 3000
• update - Package interactive updater

Example: npm start node

Usage

You can code normally as you would in any project with some aditions

• Babel
• Imports
  • import './example.js' Import a whole file
  • import exported_data from './example.js' Import exported objects, functions or primitive values
  • export default exported_data Export statement
  • For more info on imports and exports click here
• View Libraries
  • React.js
• Stylesheets
  • SASS
  • CSS-Nano
  • Autoprefixer
  • Import the compiled sass file in your JS file like this import './style.css'
  • For more info on the sass syntax click here
• Formatting and linting
  • EsLint
    • Google Config
    • Functional Programming config
    • Prettier config
  • Prettier
• Web Server
  • Express.js
  • BrowserSync
  • LocalTunnel for exposing localhost online
• Testing
  • Mocha
  • Expect
  • Supertest
  • Rewire
• Utils
  • Nodemon
  • DotEnv
  • Chalk

Release History

• 1.0.0 :
  • Organized code and added comments for public
  • Added NPS for better npm scripts management

Meta

Anthony White – me@anthonywhite.eu

Distributed under the MIT license. See LICENSE for more information.

Contributing

1. Fork it (https://github.com/AnthonySLWhite/DevEnvironment/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request