Skip to content

Latest commit

 

History

History
84 lines (55 loc) · 4.91 KB

README.md

File metadata and controls

84 lines (55 loc) · 4.91 KB
Raw

Structor - a user interface builder for React

Join the chat at https://gitter.im/ipselon/structor npm version npm downloads structor channel on discord

Video

Description

Structor is a visual development environment for node.js Web applications with React UI.

The essential part of the builder is a project boilerplate. The boilerplate is a prepacked source code of node.js application in which metainfo included. Using this info Structor knows how to use components included into the package. There is a place where you can find and download boilerplates:

Structor Market http://helmetrex.com.

It absolutely doesn't mean that you have to strictly follow the rules by which the boilerplate was designed and change the development process you used to follow. Each project is completely hackable and you can change almost everything. For example, if you don't want to use Redux or React Bootstrap in the project you may remove them from the source code. The builder is only the environment which uses metadata of the project to provide UI building.

More about the structure of pre-pack and how it is used by Structor please read Wiki of the project bootstrap-prepack.

The builder runs as HTTP server with webpack-dev-middleware + webpack-hot-middleware + react-transform-hmr inside. So, the builder can be used as an HTTP server with all hot reloading capabilities from the box.

Watch the presentation about how Structor works. This presentation shows all capabilities of Structor as development tool and describe its user interface controls: How does Structor work ?

Documentation

Tutorials

Getting started

Install Structor in global scope:

npm install structor -g

Then you have two ways to start working in the builder.

The first way:

  • Create an empty folder on local machine.
  • cd to this folder and run command: structor.
  • Open the browser and enter the address: http://localhost:2222/structor.
  • Choose suitable prepack and click clone option.
  • Start composing UI...

The second way:

  • Go to Structor Market http://helmetrex.com, choose suitable boilerplate.
  • Download package on localhost and unpack it in some empty folder.
  • cd to this folder and run npm install command.
  • Once installation is finished run structor.
  • Open the browser and enter the address: http://localhost:2222/structor.
  • Start composing UI...

The next time you want to open project in Structor, just go to the folder where project is and run structor.

Tips

To run with different port: structor -p <port>
To specify different project's working directory: structor -d <path_to_project_dir>

How to add own boilerplate to Structor Market

The source code of all boilerplates which are presented on Structor Market are located on GitHub. Consequently, you can add a reference of your own Structor compatible boilerplate to the market which exists on GitHub. To do that you have to visit Structor Market and enter the name of repository into add form.

The source code has to be compatible with Structor, to see examples of compatible repositories just visit any of already presented boilerplates. Also please note, in order to have a good looking thumbnail of your project on the market add 'screenshot.png' file with screen shot of the Structor's workspace with your project open.

Or if you know repositories of Structor compatible repos not presented on the market, please add it to the market's gallery. We appreciate your contribution to the market.

Discussion

You are welcome to join Discord channel: #structor

License

Apache License, Version 2.0 (Apache-2.0)