Giter VIP home page Giter VIP logo

scrumspace's Introduction

Startup Product: Client Side

Project State: React!

Build Status

The working copy of this repository exists at dylanfischler/startup-product-frontend-scrumspace. We have forked the repository to allow for the use of Travis build tooling (CI and CD), as well as the integration into Slack. We will be regularly pulling changes into the main repository at umass-cs-326/startup-product-frontend-scrumspace.

Building

Install Dependencies

Install node from https://nodejs.org.

After the installation, run npm install to install the application's dependencies.

Package Client

To start up a one time build script, run npm run build.

For a live rebuilding dev server, run npm run dev.

To build the client and start up the server, run npm run serve

Get MongoDB up and running

Above the root folder ('startup-product-frontend-scrumspace') of the project, create a new folder called scrumspace-data.

To get MongoDB running, simply run mongod --dbpath scrumspace-data.

Then run node startup-product-frontend-scrumspace/src/server/resetdatabase.js in order to populate the database with intitial data.

If you then go to http://localhost:8080/mongo_express/db/scrumspace/, you should see the initial data in the database.

Development Workflow

Note that this is an evolving workflow, it's just the beginning...

Javascript

We're using Webpack with Babel to provide bundling and ES6 compatibility. Please follow the directory structure in src/app/. The directory structure within should mimic the URL routing. If you have any questions as to where something should go, ask!

CSS

We are using Sass as a preprocessor for CSS. The sass directory is located in src/sass/. Everything should go in their respective files in that directory (if there is any confusion as to which file your Sass should be written in, ask). All will be packaged into dist/css/main.css during the build task.

We're using Gulp to handle live Sass compilation. Run npm run dev to start up a script that will listen to all changes in the sass directory and automatically compile your Sass to CSS (make sure you've run' npm install first). The command on Windows is just gulp (you'll need to install Gulp globally first though (npm install -g gulp).

If you're not comfortable writing Sass, you can always write vanilla CSS in the sass files, it's all compatible.

Remember, do not modify the files in dist/, they will be overwritten on in the build task..

Running the Server

The dev server can be started by running npm start.

As stated above, to build the application and start the server, run npm run serve.

The server will by default listen on port 8080, however you can configure this by setting your PORT environment variable to something else.

Additionally, we've set up nodemon to allow for the livereloading of node on server changes. Running npm run dev will start a build task that will listen to all client-side and server-side changes and trigger the proper recompiling tasks.

http://localhost:8080.

scrumspace's People

Contributors

dylanfischler avatar skankure avatar

Watchers

 avatar

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.