当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

javascript-boilerplate

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 景元徽
操作系统 跨平台
开源组织
适用人群 未知
 软件概览
Archived Repository
This code is no longer maintained. Feel free to fork it, but use it at your own risks.

marmelab-boilerplate

A starter kit for new apps, based on:

  • ES6 everywhere (with some bits of ES7, e.g. spread operator on objects)
  • React.js, React Router, and Redux (for the frontend)
  • Admin-on-rest (for the admin)
  • Node.js, Koa.js and PostgreSQL (for the API server)
  • Makefile, webpack and Mocha (for the build and test)

Features:

  • Babel transpilation (es2015, react, stage-0) for both client and server code
  • Node.js API built on top of Koa.js (successor of Express) for cleaner async code
  • Automated CRUD resources based on a PostgreSQL database (using pg and co-postgres-queries)
  • State-of the art robustness and security for the API (JWT, rate limiting, secure headers, based on helmet)
  • Separated API for the admin, with different security settings (and login form)
  • Built-in database migration handling (using db-migrate)
  • Production-level logging (using winston)
  • CORS support (including on IE8, thanks to xDomain)
  • Fully automated start and stop (see Makefile)
  • Auto-reload of Node.js code upon modification (using pm2)
  • Frontend app built with React, redux, redux-saga, react-router, and redux-form
  • Using react-dev-tools and hot reload for easier development
  • SASS preprocessor (using node-sass)
  • Including a non-trivial example with several routes, Ajax calls, and functional tests
  • Fully automated build with webpack, including development (webpack-dev-server) and production target (minified)
  • Admin app built with React.js and admin-on-rest
  • Including a full-featured admin panel with references
  • Unified test build, running unit and functional tests on all apps, powered by mocha and selenium
  • AWS deployment automated by Fabric
  • Sensible eslint defaults, based on Airbnb's rules

The boilerplate contains a sample app with three domains: users, products, and orders. Feel free to remove the corresponding files once you start implementing your own domain.

Install

Requirements:

  • Node.js V5
  • PostgreSQL
  • openjdk-8-jre (to install selenium-standalone)
# install npm dependencies and Selenium (for tests)
make install

Tip: Add alias make='make -s' to your bash profile (bashrc, zshrc) for a better display.

Understand

The project directory structure is as follows:

bin/ # CLI tasks
build/ # compiled JS and CSS files for the admin and frontend app. The web root in production.
config/ # Project configuration
doc/
e2e/ # Functional tests
src/
  api/ # The server API code (Node.js, Koa.js)
  admin/ # The admin dashboard code (Angular.js, ng-admin)
  frontend/ # The frontend code (React.js, Redux)
  isomorphic/ # Code common to several apps
webpack/ # Webpack configuration (for admin and frontend compilation)

The entire code (api, admin, and frontend) is written in ES6 and transpiled to ES5 by babel.

Tip: In production, the compiled JS and CSS files (under build/) are served by the Node.js server. In development, it's done by webpack-dev-server.

The main entry point for understanding the code is probably src/api/index.js.

Project Configuration

This projects supports various runtime environments. This means that you can switch to an entirely different configuration based on the NODE_ENV environment variable:

# run the API server in development mode (default)
$ node ./src/api/index.js
# run the API server in test mode
$ NODE_ENV=test node ./src/api/index.js
# run the API server in production mode
$ NODE_ENV=production node ./src/api/index.js

Tip: On the production servers, you should set the NODE_ENV variable using supervisor.

It uses node-config to let you configure the project for the development, test, and production environments. node-config supports configuration cascade, so the actual configuration for a given environment is the combination of config/default.js and config/[NODE_ENV].js (the configuration settings for a given environment override the default settings).

Before running the app in development, you must copy the config/development-dist.js into config/development.js (this is done by the make install command), and edit the server and database settings to your development environment. Same for the test-dist.js if you intend to run unit tests.

Note: You need to remove all the demo code before to start your project. A pull request is in progress to do so, but this will take some time to finish it. Meanwhile, take a look on these folders to manually clean the code:

Develop

This project uses pm2 to manage its processes. Configuration files for pm2 can be found in the ./config/pm2_servers/ directory.

# start servers (node and webpack via pm2)
make run-dev
# both servers will run in the background
# the Node server uses nodemon and will restart on code change
# the frontend is served by webpack dev server with hot reload

# you can restart either the api or the frontend by hand
make restart-api
make restart-frontend

Browse the app:

Tip: You can change the API port by running NODE_PORT=3001 make run-dev. Or, for persistent change, you can add this environment variable into the PM2 configuration file.

# stop servers (node and webpack)
make stop-dev

Test

# tests run in the "test" environment and don't empty the "development" database
make test

# alternatively, you can run any of the individual test suites:
make test-api-unit
make test-api-functional
make test-frontend-unit
make test-frontend-functional
make test-isomorphic-unit

API (and common lib) unit tests using:

API functional tests using:

Frontend unit tests using:

Frontend fonctional tests using:

Deployment

See deployment instructions.

Managing servers with PM2

dev and tests servers are managed with PM2. So, It's possible to :

# display the 'front dev' server's logs
make log-frontend-dev
# display the 'api dev' server's logs
make log-api-dev

# display the list of all servers
make servers-list
# display the monitoring for all servers
make servers-monitoring
# stop all servers
make servers-stop-all
# stop all servers, delete them, and clear their logs.
make servers-clear-all
 相关资料
  • script是一小段程序,可以为您的网站添加交互性。 例如,脚本可以生成弹出警报框消息,或提供下拉菜单。 可以使用JavaScript或VBScript编写此脚本。 您可以使用任何脚本语言编写各种小函数,称为事件处理程序,然后您可以使用HTML属性触发这些函数。 现在,大多数Web开发人员只JavaScript和相关框架,甚至各种主流浏览器都不支持VBScript。 您可以将JavaScript代

  • 在本章中,我们将研究JavaScript 。 在Foundation中设置JavaScript很容易; 你唯一需要的就是jQuery。 JavaScript安装 您可以使用ZIP下载,包管理器或CDN来获取Foundation JavaScript文件。 在您的代码中,您可以提供指向jQuery和Foundation的链接作为标记,放在结束之前,并检查在jQuery之后加载Foundation。

  • 使用Java 8,Nashorn,引入了一个大大改进的javascript引擎,以取代现有的Rhino。 Nashorn提供2到10倍的性能,因为它直接编译内存中的代码并将字节码传递给JVM。 Nashorn使用Java 7中引入的调用动态特性来提高性能。 jjs 对于Nashorn引擎,JAVA 8引入了一个新的命令行工具jjs,用于在控制台执行javascript代码。 解释js文件 在c:\

  • js 代码如下 报错日志: ReferenceError: escodegen is not defined

  • 在本章中,我们将重点介绍在PyCharm编辑器中使用JavaScript的主要功能。 当用户通过URL实现JavaScript库时,PyCharm打算下载本地副本,以便可以用于完成和代码分析。 考虑我们的HTML文件的示例代码,如下所示,我们在上一章中创建了该代码 - 对于每个HTML文件或JavaScript文件,您可以检查通过PyCharm Editor的Settings配置加载的外部库。 观

  • 描述 (Description) 也可以使用相关的 app 方法使用 JavaScript 打开和关闭 popover,如下所示 - myApp.popover(popover, target) - 用于打开目标元素周围的myApp.popover(popover, target) ,它接受以下参数 - popover - 这是一个required参数,它是一个要打开的popover的HTMLEl