Skip to content

Instantly share code, notes, and snippets.

@edcote
Last active May 8, 2018 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save edcote/a3eb268a536c54f1a5a57287f3a48393 to your computer and use it in GitHub Desktop.
Save edcote/a3eb268a536c54f1a5a57287f3a48393 to your computer and use it in GitHub Desktop.
Frontend Frameworks

Frontend Frameworks

NPM

npm is the package manager for JavaScript. Install using apt install npm.

  • Setup repository: cd public/js && npm init -y

  • Install modules and dependencies

npm install jquery@1.9.1
npm install popper.js@^1.14.3
npm install bootstrap

Gulp

Gulp is a build system/task runner. WebStorm brings integration with Gulp.

sudo npm install gulp -g in /usr/lib/node_modules.

npm init
npm install jquery
npm instal [..]

Bootstrap

Bootstrap is a toolkit for creating and building web pages and web applications. It was originally created by Twitter. Here is a short tutorial.

Grids provide structure to the layout. A number of CSS frameworks for grid-based layouts started to appear.

Need to follow rules to use the Bootstrap grid system. Try (http://www.layoutit.com/) to visualize your layout.

Get started with the official getting started tutorial. Bootstrap can be installed using npm.

npm install bootstrap
npm install jquery
npm install popper.js

React

React is from Facebook. Will try to use React for frontend and Play for backend. Article on this here.

  • Install create_react_app globally: sudo npm install -g create_react_app
  • Create application: create_react_app frontend
  • Install dependencies (cp, rm-rf), within frontend/ directory: cd frontend && npm install ncp rimraf -D
  • Modify build step in package.json "build": "rimraf ../public && react-scripts build && ncp build ../public && rimraf build",. Copies files to /public, which is used by play. Also set proxy to localhost:9000. See here

.. this is getting complicated, may return later?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment