Topcoder Connect is client facing application of Topcoder. Customers use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.
$ npm install
- Installs all dependencies.$ npm start
- Run application in development mode against Topcoder development environment using dev config. In this case the frontend is build in memory by webpack server and uses dev tools like redux-logger.Open browser with URL http://localhost:3000.
$ npm start
- Run application in development mode against Topcoder development environment. In this case the frontend is build in memory by webpack server and uses dev tools like redux-logger.$ npm build
- Create build for production in /dest
folder. In this case built app is configured to run against Topcoder production environment using prod config. Files are being minimized and gzipped
.$ npm run lint
- Check js code linting.$ npm run lint:fix
- Check js code linting and trying to fix errors automatically.$ npm run test
- Performs tests running. Note we don't really have tests, so we only keep this command run successfully.$ npm run test:watch
- Performs tests on files changes.$ generate:doc:permissions
- Generate Permissions documentation from the constants$ generate:doc:permissions:dev
- same like above, but it regenerates the document on every file change and is handy during development[TC Deployment Notes should always be kept up to date on the default branch. Update these notes when changes to this information occur]
General Deployment: This software is deployed to AWS S3 by CircleCI. It's ultimately delivered through AWS Cloudfront, which is fed from the S3 bucket. There are no EC2 systems involved in the delivery (althought Connect is fed from various micro-services).
Branches:
dev
will will trigger a build and deploy to the dev AWS environmentfeature/deep-links
will will trigger a build and deploy to the dev AWS environmentmaster
will trigger a build and deploy to the prod AWS environmentDevelopment Flow: This repo uses typical Gitflow (feature/[feature name]
, hotfix/[fix name]
, ...etc). Generally changes to prod should be merged from dev to master. Hotfixes should be merged to master and dev at the same time.
Additional Notes:
To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Please make sure that every pull request has passed the build checks, which appear just before the "Merge pull request" button in github.
Checkout the code and comments in src/components/ExampleComponent
for an example React component, .scss
file, and tests.
React
classnames
for dynamic classes. See ExampleComponent
for an example.JavaScript
i
or err
.lodash
and functional JavaScript if it makes the code clearer..eslintrc.json
npm run lint
to check your code against the linterSCSS Files
@import 'topcoder/tc-includes;'
at the top of your .scss
file. Locally, you can look in ./node_modules/appirio-styles/styles/topcoder/_tc-colors.scss
to find many colors already defined (e.g. #A3A3AE
=> $accent-gray
)When adding media queries, nest them inside the element, rather than creating a new section
@import 'topcoder/tc-includes;'
$my-local-var: 50px;
.box {
height: $my-local-var;
width: 50px;
color: $medium-gray;
@media screen and (min-width: 768px) {
height: 100px;
width: 100px;
color: $dark-gray;
}
.inside-box {
font-size: 14px;
@media screen and (min-width: 768px) {
font-size: 18px;
}
}
}
SVG Icons
The plugin is used to inline-embed svg icons inside the markup
Steps to adding new icons
npm test
will run the current testsnpm run test:watch
will rerun tests when files changeComponentName.spec.js
/src/components
.js
extensionView
from the menuSyntax -> Open all with current extension as...
Babel -> JavaScript (Babel)
.jsx
Sublime Text -> Preferences -> Settings-User
(⌘ + ,
on Mac)
{
"color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
"theme": "Oceanic Next.sublime-theme"
}
SublimeLinter-contrib-eslint
div.cool-class
becomes <div className="cool-class"></div>
a
becomes <a href="https://github.com/appirio-tech/connect-app/blob/dev/"></a>
className
instead of class
reg_replace.sublime-settings
by navigating to Sublime Text -> Preferences -> Package Settings -> Reg Replace -> Settings-User
© 2017 Topcoder. All Rights Reserved