E-commerce Application built with the MEAN stack
This e-commerce platform is built step-by-step on my book "Building an e-Commerce Application with MEAN" available on:
Table of Contents
- Setting up 3rd party Integrations
- Deploying to Heroku
The following instructions are the most common to get the development environment up and running. If you run into issues, check out the troubleshooting section and alternative OS-independent installations using Docker.
This installation covers *nix like systems (OS X and Ubuntu/Linux). Windows? check out https://github.com/coreybutler/nvm-windows
You need Node 0.12 in your system. Verify if you already have it with
node -v. If not or a different version, you can use Node Version Manager (nvm) to install it:
curl https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.sh | bash source ~/.nvm/nvm.sh nvm install 0.12 nvm use 0.12
NPM global dependencies
# Bower npm install -g bower # Grunt CLI npm install -g grunt-cli # Yeaoman npm install -g yo # Angular fullstack generators npm install -g email@example.com
You need to have ruby in your system. Mac OS X and Linux ship with Ruby, verify by typing
Windows: if you are using windows install Ruby with http://rubyinstaller.org/downloads/
Then, install the sass gem (library):
gem install sass
brew install mongodb 3.0.2
sudo apt-get -y install mongodb=3.0.2
You can either build the project from scratch following the instructions on the book's chapter 1 or get the source code.
git clone https://github.com/amejiarosario/meanshop.git cd meanshop npm install bower install
Getting a chapter's code
By default when you checkout, you get the
master branch which is the latests version of the app. For your convenience, you can also checkout chapter's code with the following commands (inside the project directory):
# checking out chapter 1 git checkout ch1 # checking out chapter 7 git checkout ch7 # checking out the latest git checkout master
- run server (dev mode):
- run server (production mode):
- run tests:
- run e2e tests:
- compile assets:
Setting up 3rd party Integrations
You need 3rd party API credentials to be able to use the application. They are stored in the
local.env.js, but since it will contain sensitive information you need to create it yourself. Use the sample file
local.env.sample.js to make a copy of a real one:
cp server/config/local.env.sample.js server/config/local.env.js
Get Braintree keys from: https:// www.braintreepayments.com/get-started. Check book chapter 7 for more details.
BRAINTREE_ID: 'public key', BRAINTREE_SECRET: 'private key', BRAINTREE_MERCHANT: 'merchant ID',
Note: Everytime a keys is added you need to stop
grunt serve and start it again.
Using the Braintree sandbox account
We can test the workflow of order creation by running the application:
- Add multiple products to the shopping cart.
- Checkout the products using some valid credit card numbers for testing such as 4111 1111 1111 1111 or 4242 4242 4242 4242.
- Any expiration date in the future will do.
Optional for social Login
In the chapter 6 you can find more detailed information. Here's a summary of what you need:
Go to Facebook Developers and register your app: https://developers.facebook.com
FACEBOOK_ID: 'app-id', FACEBOOK_SECRET: 'secret',
Go to Twitter Apps and get your app registred: https://apps.twitter.com
TWITTER_ID: 'app-id', TWITTER_SECRET: 'secret',
Go to Google Developers and get the credentials: https://console.developers.google.com/project
GOOGLE_ID: 'app-id', GOOGLE_SECRET: 'secret',
For any question, ideas for improvement use click here.
If you have ideas to make this app better (and you should!
- Fork it clicking the fork button on the top right corner of this page.
- Create your feature branch:
git checkout -b my-new-feature.
- Commit your changes:
git add . && git commit -m 'Add some feature'.
- Push to the branch:
git push origin my-new-feature
- Come to this page and it will show up "create pull request" option.
- Submit your pull request and add some info about your changes. Include screenshots and animated GIFs in your pull request whenever possible.
Deploying to Heroku
Heroku requires installing a command-line program called heroku-toolbelt. Follow the instructions on https://toolbelt.heroku.com to install it. Also, create an account in Heroku if haven't yet.
# Build for production grunt build # Use angular generator to deploy yo angular-fullstack:heroku # Add MongoDB to heroku deployment cd dist && heroku addons:create mongolab:sandbox # Set environment to production heroku config:set NODE_ENV=production # Add all 3rd party credentials .e.g.: $ heroku config:set FACEBOOK_ID=appId FACEBOOK_SECRET=secret # See deployed app heroku open
You can visualize all the set variables with
Any other update can be refreshed on Heroku by typing the following command:
Depending on the OS, there are some subtle differences.
If you don't have enough permissions consider using:
sudo npm install vs
Allows running commands as root:
bower install --allow-root
Detailed MongoDB installation on Ubuntu:
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list sudo apt-get update sudo apt-get install -y mongodb-org=3.0.2 mongodb-org-server=3.0.2 mongodb-org-shell=3.0.2 mongodb-org-mongos=3.0.2 mongodb-org-tools=3.0.2
Docker allows to run app independently from OS. It works for Windows, Mac, Linux and most cloud providers (AWS, Digital Ocean, ...). Just need to install docker from https://www.docker.com/.
After installing docker programs, go to the terminal:
Find my contact info at http://adrianmejia.com.