No description, website, or topics provided.
JavaScript HTML CSS
Latest commit e1f48dd Feb 9, 2017 @jbasdf jbasdf Updates package
Permalink
Failed to load latest commit information.
client
.env.example
.eslintignore
.eslintrc.yml
.gitignore Adds build tools Apr 28, 2016
.hound.yml Lint the hero of time (#6) Dec 6, 2016
.nvmrc
.s3-website.json
.travis.yml adds the postnatal to make travis work, and allows jsx tests (#8) Dec 7, 2016
LICENSE
README.md
package.json
yarn.lock

README.md

React Client Starter App Build Status Coverage Status


There are many starter kits that will help you get started with React and Redux. This is the one created by, maintained by and used by Atomic Jolt. Atomic Jolt uses this as application as a starting place for our Ruby on Rails and React starter application and our Firebase React starter appliction.

Getting Started:


Make sure to install git, npm and yarn before you start then:

  1. git clone https://github.com/atomicjolt/react_client_starter_app.git my_project_name
  2. Rename .env.example to .env. This file contains the port the server will use. The default 8080 should be fine, but you can also use a local domain or ngrok if you wish.
  3. Install packages with

    yarn

  4. Start server with:

    yarn hot

then visit http://localhost:8080

Using the React Client Starter App


Source code lives in the client directory. Modify html and js files in that directory to build your application.

React.js


React code can be found in client/js. We use Redux and the React-Router.

Html


All html files live in client/html. The build process will properly process ejs in any html files as well as process markdown for files that end in .md. All front matter in .md files will be available to the ejs templates. See about.md for an example.

Assets


Any files added to the assets directory can be used by in code and assigned to a variable. This allows for referring to assets using dynamically generated strings. The assets will be built according to the rules specified in your webpack configuration. Typically, this means that in production the names will be changed to include a SHA.

First importing the assets: import assets from '../libs/assets';

Then assign the assest to a variable: const img = assets("./images/atomicjolt.jpg");

The value can then be used when rendering: render(){ const img = assets("./images/atomicjolt.jpg"); return<div> <img src={img} /> </div>; }

Static


Files added to the static directory will be copied directly into the build. These files will not be renamed.

Tests


Karma and Jasmine are used for testing. To run tests run:

yarn test

Check for updates


Inside the client directory run:

yarn upgrade-interactive

Deploy to S3:


  1. Setup credentials. If you've already setup your Amazon credentials in ~/.aws/credentials you will be able to do something similar to the following where "myprofile" is one of the AWS profiles found in ~/.aws/credentials:

    export AWS_DEFAULT_PROFILE=myprofile export AWS_PROFILE=myprofile

    You can also use a .env file. See the s3-website documentation for more options.

  2. Edit configuration.

    Open up .s3-website.json and set the desired bucket name

  3. Configure the bucket as a website

    yarn create

  4. Deploy.

    yarn release

Production


If you want to see what your application will look like in production run

yarn live

This will serve files from the build/prod directory.

Deploy:


Build a development release without deploying:

yarn build_dev

Build a release without deploying:

yarn build

Build a release and deploy:

yarn release

License and attribution

MIT