Skip to content

Instantly share code, notes, and snippets.

@DaxChen
Created October 25, 2015 00:57
Show Gist options
  • Save DaxChen/52309a33b5792cd61b6a to your computer and use it in GitHub Desktop.
Save DaxChen/52309a33b5792cd61b6a to your computer and use it in GitHub Desktop.
My personal Meteor scaffold script for React apps
#!/bin/sh
if [ "$#" -ne 1 ]; then
echo "Usage: $0 <project name>" >&2
exit 1
fi
meteor create $1
rm -f $1/$1*
mkdir -p $1/client/components $1/client/pages $1/client/lib $1/client/styles $1/server $1/lib/collections $1/public $1/tests/cucumber/features/step_definitions $1/tests/cucumber/fixtures $1/tests/cucumber/features/support
touch $1/client/pages/Layout.jsx
touch $1/client/pages/Home.jsx
touch $1/settings.json
touch $1/server/fixtures.js
touch $1/server/publications.js
touch $1/client/styles/variables.import.scss
# Fill some files with stuff
cat > $1/client/router.jsx << EOT
FlowRouter.route('/', {
name: 'home',
action() {
ReactLayout.render(Layout, {content: <Home />});
}
});
EOT
cat > $1/client/pages/Layout.jsx << EOT
Layout = React.createClass({
displayName: 'Layout',
render() {
return (
<div>
{this.props.content}
</div>
)
}
});
EOT
cat > $1/client/pages/Home.jsx << EOT
Home = React.createClass({
displayName: 'Home',
render() {
return (
<div>
Home.
</div>
)
}
});
EOT
cat > $1/client/main.html << EOT
<head>
<title>$1</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
</body>
EOT
cat > $1/lib/global-init.js << EOT
// Use lodash instead of underscore
_ = lodash;
EOT
cat > $1/client/lib/helpers.js << EOT
// Thanks to Adam Brodzinski for this
// This replaces the deprecated React.addons.classSet. I wanted to keep my
// apps "pure" Meteor by not using browserify, so I went this route.
classNames = function classNames() {
let classes = '';
for (let i = 0; i < arguments.length; i++) {
let arg = arguments[i];
if (!arg) continue;
let argType = typeof arg;
if ('string' === argType || 'number' === argType) {
classes += ' ' + arg;
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
} else if ('object' === argType) {
for (let key in arg) {
if (arg.hasOwnProperty(key) && arg[key]) {
classes += ' ' + key;
}
}
}
}
return classes.substr(1);
};
EOT
cat > $1/tests/cucumber/features/test.feature << EOT
Feature: Test Feature
As a developer
I want to build killer apps
So that I can fulfill the burning desire to create things
@focus
Scenario: A placeholder
Given I am on the home page
Then everything is all right
EOT
cat > $1/tests/cucumber/features/step_definitions/test.js << EOT
module.exports = function () {
this.Given(/^I am on the home page$/, function () {
client.url(process.env.ROOT_URL);
});
this.Then(/^everything is all right$/, function () {
expect(1).toBe(1);
});
};
EOT
cat > $1/tests/cucumber/features/support/hooks.js << EOT
module.exports = function () {
// Call reset method to clear everything out
this.Before(function () {
server.call('reset');
});
};
EOT
cat > $1/tests/cucumber/fixtures/fixtures.js << EOT
Meteor.methods({
'reset': function () {
// Remove database and other data here
}
});
EOT
# Temporary, until this bug is fixed (can't have empty SCSS file)
echo '$nothing: #000;' > $1/client/styles/variables.import.scss
cd $1
# Packages!
echo "Removing and adding packages...\c"
meteor add react kadira:flow-router kadira:react-layout twbs:bootstrap fourseven:scss jquery jagi:astronomy stevezhu:lodash meteorflux:dispatcher meteorflux:appstate xolvio:cucumber >/dev/null
meteor remove autopublish insecure session blaze-html-templates >/dev/null
echo "done."
# .idea = WebStorm project folder
cat > .gitignore << EOT
.idea
.cloc.exclude
EOT
# .cloc.exclude = Exclusion list for 'cloc' app to count lines of code
cat > .cloc.exclude << EOT
.meteor
.idea
tests
EOT
git init
echo
echo "Project scaffolded, Git repository initialized."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment