PLEASE CREATE ISSUES AT https://github.com/strongloop/loopback/issues
#loopback-getting-started
This is the example application that accompanies the Getting started with LoopBack tutorial. Follow the steps in the tutorial to create this application from scratch.
NOTE: This repository has commits for each step of the tutorial, so you can pick up the tutorial at any point along the way:
See Getting started with LoopBack for step-by-step instructions to create this application.
##Authentication
Motivated by:
- Ionic & LoopBack Frameworks – Building a REST API
- loopback-example-passport
- Third-party login using Passport
- Tutorial: third-party login
How to get req.user in /auth/callback
Motivated by:
- How to Implement Node + React Isomorphic JavaScript & Why it Matters
- Webpack backend
- reactGo
- Fix window is not defined in server rendering
- Isomorphic Webpack proxy
- Start your own JavaScript library using webpack and ES6
Client side was bootstrapped with Create React App.
After creation, your project should look like this:
my-app/
README.md // This file
node_modules/ // Modules to run and work application
package.json // Project configuration file
nodemon.json // Nodemon configuration file
.eslintrc // ESLint rules
.eslintignore // ESLint exceptions
app/ // Application source folder
components/ // React components
component/ // React component folder
component.js(x) // React component file
component.css // Compiled Styles (please do not edit)
component.scss // component Styles (edit styles here) auto compiled to css
containers/ // React-Redux containers with mapped state and actions
App.js(x) // root react-redux container - render children route containers
Container.jx(x) // React-Redux container (linked in routes.js(x))
css/ // Application Styles like (reset.css, normalize.css, fonts.css)
_include-media.scss // (http://include-media.com/) Simple, elegant and maintainable media queries in Sass
img/ // Images path
component/ // Component images path
redux/ // Redux implementation
middlewares/ // Redux middlewares and promises from https://github.com/reactGo/reactGo
preRenderMiddleware.js // preRenderMiddleware for server rendering (currently not used)
promiseMiddleware.js // Promise middleware for actions and http requests (REQUEST, SUCCESS, FAIL types)
modules/ // Redux modules (reducers&actions)
module/ // Incapsulated redux module
index.js // implementation reducer, actions and constants
index.js // Root-reducer combineReducers
configureStore.js // Store configuration, apply middlewares and hot modules
client.jsx // Front-End entry point. Import store from redux, apply routing and render application
index.html // HTML template
routes.jsx // React-router child routes and route logic
server.jsx // Server-side render entry point
template.js // Template for server-side rendering (same as index.html)
build/ // Public folder to store static files (Front-End)
static/ // Front-End static files
server.js // Server-side render node-ready component (builded after webpack backend)
common/ // Loopback common folder
models/ // Loopback data-models folder
access-token.json // Extended accessToken model (https://github.com/strongloop/loopback-example-passport)
user.js // Model before/afret helpers (Add & Remove cookies after login/logut)
user.json // Extended User model (https://github.com/strongloop/loopback-example-passport)
user-credentials.json // Extended userCredential model (https://github.com/strongloop/loopback-example-passport)
user-identity.json // Extended userIdentity model (https://github.com/strongloop/loopback-example-passport)
config/ // Project config and build-helpers
jest/ // Facebook JavaScript test
env.js // Webpack client environment
path.js // Webpack client folders config
polyfills.js // whatwg-fetch - promise polyfills
webpack.be.config.development.js // Webpack development config Back-End
webpack.fe.config.development.js // Webpack development config Front-End
webpack.config.production.js // Webpack production config
server/ // Loopback backend/api folder
boot/ // Loopback boot scripts
authentication.js // Enable [authentication](http://loopback.io/doc/en/lb2/Authentication-authorization-and-permissions.html) & [loopback.token middleware](https://strongloop.com/strongblog/part-1-ionic-loopback-node-js-mobile/)
create-lb-tables.js // Database update script & create test user
passport-facebook.js // Apply passport-facebook provider middleware
root.js // Root routing (app entry point)
routes.js // Backend/api routes
component-config.json // Loopback components config (base)
component-config.production.json // Loopback components config (production)
config.json // Loopback general config (base)
datasources.json // Databases providers(connectors) config(base)
datasources.local.json // Databases providers(connectors) config(local without git sync)
environment.js // Environment helper
middleware.development.json // Loopback middlewares development config (helmet, client folder etc.)
middleware.json // Loopback middlewares base config (helmet, client folder etc.)
model-config.json // Applying models to connectors/providers
passport.json // Passport providers config file
passport.json // Passport providers config file (local without git sync)
server.js // Application entry-point
For the project to build, these files must exist with exact filenames:
public/index.htmlis the page template;src/index.jsis the JavaScript entry point.
You can delete or rename the other files.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack.
You need to put any JS and CSS files inside src, or Webpack won’t see them.
Only files inside public can be used from public/index.html.
Read instructions below for using assets from JavaScript and HTML.
You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.
- Concurrently for multiple tasks
- ESLint JavaScript Linter
- Node-SASS add SASS(SCSS) support for project
- React Redux Official React bindings for Redux
- React Router is a complete routing library for React
- react-router-redux Ruthlessly simple bindings to keep react-router and redux in sync
- Redux data flow
- Redux Logger middleware
- Thunk middleware for Redux
Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.