proto-starter-semantic

An isomorphic (universal) web app starter project with Semantic UI integration. This project is designed with developer productivity and happiness in mind. This is because it uses Viewmodel for declarative components and state management. Viewmodel is easy-to-use and powerful, and fallback on React if needed. This starter has SSR, isomorphic routing built-in, and will render the initial component states directly. It is also highly extendable using Meteor's capabilities It doesn't rely on many dependancies but can already do a lot.

Technology used

1. Meteor for isomorphic builds, SSR, easy code splitting (dynamic imports), reactive data, user accounts...
2. Viewmodel For components, state management, validation, bindings between state and view...
3. React For the underlying layer of Viewmodel. It can be changed to Inferno according to Viewmodel, and this would imply some changes in this starter.
4. Universal router and History to provide an easy-to-use, isomorphic router.
5. Test suite for Viewmodel and React: enzyme, jest... See Viewmodel documentation for testing
6. Debugging tool for Viewmodel: viewmodel-react-explorer component is included in the < App / > component, and let you play with the states of components
7. Semantic UI For an easy-to-use component and styling

Installation

1. Install Meteor
2. In the command line, type: git clone https://github.com/antoninadert/proto-starter.git . Your folder must now be created
3. Go in this folder from the command line: cd proto-starter
4. meteor update (if needed)
5. meteor npm install (if needed)
6. meteor npm update --save (if needed)

If Meteor gets stuck in the process, you can try to press Ctrl+C to abort some (sometime invisible) tasks and resume installation.

Run

meteor

Then open your localhost: http://localhost:3000/

Usage

/imports This folder contains code that must be imported to be used (meteor convention). Mainly used to put your Component that will be imported later by server and client (isomorphic). Remember to import your components in /both/routes.js in order to use them.

/both This folder contains isomorphic code, used by your app and server (this is a meteor convention). Useful for putting collections, routes...

/client This folder contains client (browser) code, Used for routing and initializing the project (browser-side).

/client/lib This folder will be loaded first in the client (meteor convention)

/client/lib/semantic-ui Contains semantic-ui stuff. It should generate .custom.semantic.ui automatically, as well as some files and folders related to semantic-ui.When running meteor command, if semantic UI is not generating correctly, use Ctrl+C to stop generation, delete .custom.semantic.ui but keep custom.semantic.ui and try to run meteor again

/server This folder contains server code, Used for your meteor methods (pub/sub mechanism)

Then open your localhost: http://localhost:3000/

Test

jest

Technology that you won't need to use

1. RxJS as this is handled by Viewmodel
2. Redux as this is also handled by Viewmodel
3. React-helmet as this is easy to generate this yourself using server-render package from meteor (See sink.appendToHead() method used in /server/router.js )
4. React router as universal router is more concise and simpler

Caveats

1. The first time you use the project, Meteor can take a while (15 min?) to initiate. This should only happen if Meteor is changing versions (Current version: 1.5.1)

No CSS builder, as there are so many ways to do it I thought I let you figure this out. I will maybe create a new starter including Aphrodite for styling as this seems a good and simple approach.

Licence

Apache 2.0 Licence (see LICENCE file)

Copyright © Antonin Adert 2017 All Rights Reserved.