My M.E.A.N. website client/front-end (Alpha)

This is the client side. Server side is available HERE

Informations

My MEAN website is a MEAN's web application that I'm creating as a personal website, but also for other users. It's composed by:

• M: a MongoDb's database
• E: a back-end with Express js
• A: a front-end in Angular >= 4
• N: a back-end in Node.js
• redis
• webpack and gulp
• and other stuff

A possible extension of this project will be a configurable template to build a custom web app very quickly. This is my final goal, please be patient :)

Attention! This project is still an alpha, so it's not production ready. Please be careful. If you are interested, star this project on GitHub, share it and create pull requests.

Testing:

• front-end unit: coverage >80%
• front-end e2e: work in progress, initial implementation available in Alpha 9

Requirements

• macOS, Linux or Windows 10 with admin privileges
• Node.js + npm
• some global npm dependencies
• My-MEAN-website server
• Google Chrome and Mozilla Firefox (mandatory if you want to run npm test) (also Internet Explorer if you are using Windows)
• work in progress... (this is only an alpha, please be patient)

News

• 10/06/2017 - My MEAN website Alpha 9 public release HERE
• 08/20/2017 - My MEAN website Alpha 8 public release HERE
• 08/10/2017 - My MEAN website Alpha 7 public release HERE
• 04/09/2017 - My MEAN website Alpha 6 public release HERE
• 01/21/2017 - My MEAN website Alpha 5 public release HERE
• 12/30/2016 - My MEAN website Alpha 4 public release HERE
• 11/28/2016 - My MEAN website Alpha 3 public release HERE
• 10/27/2016 - My MEAN website Alpha 2 public release HERE
• 08/15/2016 - My MEAN website Alpha 1 public release HERE

How to install (MacOS)

• install both Mozilla Firefox and Google Chrome
• from the setup folder of this project, run bash install-macos.sh
• import the db dump (.bson) from db-dump-prod's folder either running db-dump-prod/init.sh to do it automatically thanks to both mongo ad mongorestore CLIs, or using Studio 3T (previously MongoChef)

How to install (Linux)

Tested only on Ubuntu

• install both Mozilla Firefox and Google Chrome
• from the setup folder of this project, run bash install-ubuntu.sh
• import the db dump (.bson) from db-dump-prod's folder either running db-dump-prod/init.sh to do it automatically thanks to both mongo ad mongorestore CLIs, or using Studio 3T (previously MongoChef)

How to install (Windows 10)

Tested only on Windows 10

• install both Mozilla Firefox and Google Chrome
• install Node.js from the official website
• install MongoDb Community from the official website
• create a db called KS (obviously you have to start MongoDb to do that). You can configure this value later, but for debug/local environment I suggest this name
• import the db dump (.bson) from db-dump-prod's folder either running db-dump-prod/init.sh to do it automatically thanks to both mongo ad mongorestore CLIs (if available in your PATH variable), or using Studio 3T (previously MongoChef)
• install redis-server for Windows (file .msi) HERE
• install Python 2.7.x from the official website
• from the setup folder of this project, run with PowerShell as administator bash install-windows.sh

If you'll have problems with node-zopfli, you have to install it properly following this tutorial. There are two options, try with the first one npm install --global --production windows-build-tools, if it will fail, use option 2. Both options will require to download really big files from microsoft.com (manually or automatically). So, be careful.

How to setup

1. if necessary rename (case-sensitive) the main folder of this project into My-MEAN-website-client to match FRONT_END_PATH in .env file of server-side
2. execute npm install into the root folder (if it will fail, run it again)
3. follow the tutorial to prepare My-MEAN-website server (remember to start both MongoDb and redis-server)
4. start My-MEAN-website server with npm start
5. execute npm start into the root folder to run this application (client/front-end)

This will start this application at http://localhost:3300

PS: If you didn't execute server-side before, you won't be able to see the entire home page (because created using data taken from DB)

How to start (development mode with HMR and BrowserSync)

1. cd My-MEAN-website-server
2. npm start
3. cd ..
4. cd My-MEAN-website-client (if necessary rename it (case-sensitive) to match FRONT_END_PATH in .env file of server-side)
5. npm start (or npm run build for production)
6. Surf to http://localhost:3300

If you want to start the admin page, go to http://localhost:3300/admin.html Attention: it's very unstable, because I decided to implement only some basic features. I'll improve it in the next alphas.

How to start (development mode bundle)

1. cd My-MEAN-website-server
2. npm start
3. cd ..
4. cd My-MEAN-website-client (if necessary rename it (case-sensitive) to match FRONT_END_PATH in .env file of server-side)
5. npm run build:dev
6. Surf to http://localhost:3000

If you want to start the admin page, go to http://localhost:3000/admin.html Attention: it's very unstable, because I decided to implement only some basic features. I'll improve it in the next alphas.

How to start (production mode bundle)

1. cd My-MEAN-website-server
2. npm start
3. cd ..
4. cd My-MEAN-website-client (if necessary rename it (case-sensitive) to match FRONT_END_PATH in .env file of server-side)
5. npm run build:prod
6. Surf to http://localhost:3000

If you want to start the admin page, go to http://localhost:3000/admin.html Attention: it's very unstable, because I decided to implement only some basic features. I'll improve it in the next alphas.

How to start (production mode + AOT bundle - recommended for production)

1. cd My-MEAN-website-server
2. npm start
3. cd ..
4. cd My-MEAN-website-client (if necessary rename it (case-sensitive) to match FRONT_END_PATH in .env file of server-side)
5. npm run build:prod:aot
6. Surf to http://localhost:3000

If you want to start the admin page, go to http://localhost:3000/admin.html Attention: it's very unstable, because I decided to implement only some basic features. I'll improve it in the next alphas.

How to run unit tests (with karma)

• npm test

How to run e2e tests (with protractor)

When you run npm run e2e, this will init a fake db called test-db with some fixed data available into ./db-dump-e2e

• Run the server-side inside My-MEAN-website-server's folder with either npm run e2e:start or npm run e2e:forever:start
• npm run build:prod:aot to create your production build of the client-side into ./dist
• npm run e2e (to run e2e tests of client-side using the bundle available inside ./dist)
• to stop server-side run either npm run e2e:stop or npm run e2e:forever:stop inside My-MEAN-website-server's folder

Features

Work in progress... (this is only an alpha, please be patient)

Future extensions

Work in progress... (this is only an alpha, please be patient)

Images

Note: updated local profile info

Note: multiple account connected (Local, Facebook, Github, Google and Linkedin)

Admin web page (list of users)

Configuration

Work in progress... (this is only an alpha, please be patient)

Thanks

A special thanks to the authors of these books, because very useful to understand how to develop a modern web application: BOOK1 and BOOK2. Also to this project and this one

License

Copyright 2015-2017 Stefano Cappa

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

**Created by Stefano Cappa**