Git Product home page Git Product logo

mean2vagrant's Introduction

mean2vagrant

This project is an attempt to have a one-click setup for a MEAN stack with Angular2 on a virtual machine under a Windows environment (parts can likely be re-used under other OSes).

Why?

I wanted to start writing an app in Angular2, with a MEAN like back-end, but ran into some issues getting my environment setup. Inspired by this post, I decided to get this environment setup in a virtual machine. This took me weeks (granted only a few hours per day), because of little issues with the various moving parts. Since it was such a pain I decided to clean it up a bit once it was working and setup this repo, so that others could use this as well.

I chose to set it up on Ubuntu 14.04 so that i can spin up a box on DigitalOcean (referral link) and be able to easily setup the same kind of environment.

Disclaimer

I'm a developer and so, am not proficient with Linux, Virtual Machines, Vagrant, nginx, etc. Before going to production, I suggest you find someone who is, and have them work on your setup for both performance and security. Also, if you break something, it's not my fault.

Component Technologies

  • Vagrant - To provision the virtual machine, and run the initial setup, as well as be able to run the VM locally when you need to use it.
  • Oracle VM VirtualBox - Runs the actual VM (you can set this up with VMWare as well, but VirtualBox is free).
  • Ubuntu 14.4 - The OS under which we will run the environment. Chosen specifically to match a DigitalOcean box.
  • Node, Express, Mongo (with Mongoose) - back end server. This can be modified to your needs. I chose this setup because it seemed like what I would need, but feel free to modify for your needs (PostgreSQL, MySQL, completely different backend, etc..)
  • Angular2 + Webpack based on AngularClass' Angular 2 Starter kit
    • An Angular 2 Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes), Material Design, Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack by @AngularClass
  • nginx - for allowing us to access the server by a domain name vs IP (in conjunction with a hosts entry)

Quick Start

Prerequisites

  1. Install Vagrant. If interested, read their docs.
  2. Install Oracle VM VirtualBox

Install

  1. Clone this repo to the directory where you will be running everything (e.g. C:\MEAN2VAGRANT)
  2. Run hosts.add.bat - this will add a hosts entry for www.mean2.dev pointing to the vagrant machine's IP (192.168.80.30)
  3. Run _vagrant.Up.bat or vagrant up from command line.

If everything goes right (you may need to run _vagrant.Reload.bat or vagrant reload, after initial install), you should be able to hit www.mean2.dev in the browser and see the Angular2 start page. Hit www.mean2.dev/api/ to access Express.

Want to improve this?

If you know anything about any of the underlying technologies that would improve this setup, feel free to reach out to me or just create a PR. That would be very much appreciated.

More details

Access the code in /app/server/ and /app/client/. /app is a shared folder, accessible in the VM at /vagrant/app/. You can access the VM either by using the VirtualBox interface (username: vagrant, password: vagrant) or just by running _vagrant.SSH.bat

nginx.conf in the main direcory is the nginx configuration file. It will get updated in the VM everytime you run vagrant up. If you make changes while the machine is running and you want them applied, run nginx.UpdateReload.bat.

_urlResources - contains some links I used during this whole process.

Vagrantfile contains all the vagrant configuration. It contains some comments about what it's doing.

There is a number of files that run during the provisioning, as well as one file that runs everytime the server gets run:

  • setup.10.base.ps - Updates Ubuntu and gets git
  • setup.15.nginx.sh - Installs nginx
  • setup.20.nvm.sh - Installs NVM (node version manager), NPM (node package manager), and the latest Node
  • setup.40.ServerSide.sh - Express, Mongo, Mongooose install based on this post - check it out, it's a good read.
  • setup.50.ClientSide.sh - Angular 2 Starter kit. Had some issues with this, but it seems to work.
  • setup.runServers.sh (will always run) - update nginx.conf. Used to run servers, but that's separated now.

_vagrant.runServers.bat

This can run separatly if the servers is already up, but will also run when running _vagrant.DestroyAndUp.bat, _vagrant.Reload.bat or _vagrant.Up.bat. You can stop the window, and rerun it to restart both the backend and the frontend servers.

  • Run express server (using forever)
  • Run the angular+webpack server (with hot module replacement; not currently using forever because of some issues)

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.