This is a prototype for the front-end of codeclub-viewer.
This is a structor prototype of the site codeclub-viewer. (It was based on bootstrap-prepack.)
To look at or modify the prototype, you first have to cd prototype and then
npm install
The following instructions about the prototype assumes you are in the prototype folder.
If you want to just look at the exported prototype, just type
node ./server.js
Then go to your browser and type localhost:3000 in the address bar.
If you want to play with the prototype, and make changes, first install structor globally:
npm install -g structor
Then run it by typing
structor
Then go to your browser and type localhost:2222/structor. Make changes, and preview the site right in the editor.
Don't forget to save your work before quitting. If you want to test it out "for real",
choose export project (instead of save), and then go to the commandline and write
npm run build
node ./server.js
and go to your browser and type localhost:3000 in your address bar.
If you make changes you are happy about, create a pull-request.
The rest of the README is the original README from structor.
Structor starter project with React Bootstrap components.
Structor's documentation:
reactreact-routerredux,redux-thunk,react-reduxredux-sagareact-bootstrapexpress
react-bootstrap is a library of reuseable front-end components. You'll get the look-and-feel of Twitter Bootstrap, but with much cleaner code, via Facebook's React.js framework.
In the builder you will have an ability easily compose components right on the page using different variants of Bootstrap components.
But also you can add your own reusable components manually.
Every component has its own quick note which is accessible through "Options" -> "ReadMe"
If you still didn't start the backend server please do the following:
- Run command:
npm install - Run command:
node ./server.js
Now you can start Structor from command line. To recognise the path of current project's folder Structor has
to be started in the root directory of current project or started with command argument -d pointing to project's folder.
- in project root dir:
structor - in any other dir:
structor -d <path to project directory>
Once you have started Structor you will see the project's workspace. Now you can try to combine components with each other,
or generate new React components from the combination, or add new pages, or whatever you want.
We need to setup proxy because of CORS restriction, it means that Structor runs on 2222 port on localhost, and our application may require to request REST service on 3000 port. That is restricted by browser policy.
To omit that Structor has embedded http proxy, which you can setup while you are working in workspace.
So, if your application will work with REST service running on http://localhost:3000/service, setup proxy to: http://localhost:3000
and then application has to use the following pattern for requests /service/....
Current project already has proxy setup to http://localhost:3000.
But if you want to direct request from components into another REST or HTTP server you can setup new value in Structor menu:
In any moment of work with Structor you can export existing pages into real pages with routes. This can be done by selecting option "Export project".
After that you will get a list of generated files of pages' components. And one more additional file for router configuration.
In current project these files will be generated into src/routes/ folder. But, you can change this path in .structor/config.json file.
Also you may edit templates for output React components in .structor/templates/ or add your own new with ".tpl" extension.
If you want to see the app in action please do the following:
- Run command:
npm run build - Run command:
node ./server.js
Then, if everything were built and you didn't stop backend server, just go to http://localhost:3000
MIT