Skip to content

Latest commit

 

History

History
109 lines (75 loc) · 5.49 KB

README.md

File metadata and controls

109 lines (75 loc) · 5.49 KB
Raw

Please see parent directory README.md.

Building options

  1. Rails & React with hot reloading styleguide
foreman start -f Procfile.hot
> Currently runs all webpack configs options:
> - webpack.client.config.js => .js & .css files to be imported in the Rails side
> - webpack.server.config.js => server-bundle.js to be used if 'prerender: true'
> - webpack.storybook.config.js => Hot reloading styleguide setup
  1. Rails & React
foreman start -f Procfile.static

Currently runs build configs options

  • webpack.client.config.js => .js & .css files to be imported in the Rails side
  • webpack.server.config.js => server-bundle.js to be used if 'prerender: true'
  1. Creating Assets for Tests
foreman start -f Procfile.spec

Currently runs build configs options

  • webpack.client.config.js => .js & .css files to be imported in the Rails side
  • webpack.server.config.js => server-bundle.js to be used if 'prerender: true'

If you need to debug the Rails parts of Sharetribe with Pry, it's not possible with Foreman due to a known compatibility issue. In this case we recommend running Rails with old-fashioned rails server and React builds with Foreman in a separate terminal. That way your binding.pry calls open nicely in the same window with the Rails process. Procfiles Procfile.client-static and Procfile.client-hot are configured for that, respective descriptions above apply.

Developing new components

Components are separated based on Atomic design: elements (aka atoms), composites (aka molecules), and sections (aka organisms).

  • Elements are React components which are basic visual elements. For example: avatar image.
  • Composites are combined elements. E.g. ProfileCard combining Avatar and Name atoms could be a composte.
  • Sections are higher level composites. They are responsible for page sections like html5 tags do. (Think about <header>, <footer>, <main>, <aside>, and <section>)

Later we might add template & page levels too.

You need to register new React components (e.g. "ExampleApp") for react_on_rails gem to recognize it.

ReactOnRails.register({ ExampleApp });

Add it to sharetribe/client/app/startup/clientRegistration.js and serverRegistration.js. Read more from react_on_rails repository and check their example app.

New React components can be included to HAML and ERB files with 'react_component':

<%= react_component("ExampleApp", props: @app_props_server_render, prerender: true, trace: true) %>

webpack.server.config.js creates a server-bundle.js file which is used by react_on_rails gem to create server-side rendering.

webpack.client.config.js defines how component specific styles are extracted using ExtractTextPlugin (if you have imported style.css file in your React component). These generated files (app-bundle.js, vendor-bundle.js, and app-bundle.css) and they are saved to sharetribe/app/assets/webpack folder.

For stylesheets, we are using CSS Modules and PostCSS with cssnext.

We use React Storybook for a hot reloading component development environment, in http://localhost:9001/. See instructions for writing stories, for example story see OnboardingTopBar.story.js.

Publishing styleguide for preview

Styleguide can be published as a static build, to be used for e.g. reviews by other team members. Running npm run deploy-storybook in client directory publishes styleguide from your branch to https://sharetribe.github.io/sharetribe/[BRANCH_NAME]/.

We're using a custom fork of Storybook deployer, modified to output different branches to different directories. The goal is to get it merged upstream, but it still requires some work.

Running tests

Run full test suite:

npm run test

For TDD type of development, where you run the same test multiple times, you may want to use npm run devspecs, which runs only specs and runs them a bit faster.

npm run test:devspecs

Linting JavaScript and CSS files

For static code linting, we use ESLint for JavaScript code and stylelint for CSS code. The configuration can be found in .eslintrc.js and .stylelintrc.js, respectively.

You can run the linting with:

npm run lint       # run both ESLint and stylelint
npm run eslint     # run only ESLint
npm run stylelint  # run only stylelint

Troubleshooting

Changes in variables.js file don't seem to take an effect

Restarting foreman is needed when variables.js is changes

Changes in translations don't seem to take an effect

Run rake assets:clobber and restart foreman