Code Monkey home page Code Monkey logo

blrplt's Introduction

bitHound Dependencies bitHound Dev Dependencies

Read more about it on Medium here.

BLRPLT

Blrplt is a relatively small boilerplate for React + Redux projects that takes care of server-side-rendering and prefetching API calls with redux-saga.
It lets you develop fast locally and will also let you create a server-script that uses redux-saga to prefetch your first api-calls and add them to your store on the server-side.

It also provides optional scripts to deploy directly to AWS Lambda by using AWS Serverless Express.

Motivation

At the time of writing there aren't a lot of boilerplates that cover prefetching API-calls with redux-saga during the server-side-rendering.
By doing this, your app will be rendered with API-data instead of fetching it when the javascript is loaded. This results in faster loading times.

Also, there aren't many boilerplates that cover running a serverless react app on AWS.
The Serverless Express library is still very new and by providing this boilerplate I want to give more attention to the awesome stuff you can do with it.

The goal is not to provide a boilerplate that decides your React/Redux setup, but provide the rest; a great way to release your app with server-side rendering.

Installation

To use the boilerplate, use yarn.

Clone the repository into a folder you want:

git clone [email protected]:happylinks/blrplt.git ProjectName  

Install all dependencies for client:

yarn install  

Install all dependencies for server:

cd server && yarn install  

(these are seperated to keep a small server bundle)

Get Started

To run a local server and start developing you can run:

yarn run start

Now you can create your app and directly see the results with hot-reloading.

Build for production

When you want to release your app, you can do this two ways.

Use AWS S3 + Cloudfront for assets, AWS Lambda + API Gateway for server.

To provide a easy deployment of your single page application you can use S3 and Cloudfront for static files.

  1. You should make sure that the settings in package.json are correct. You can name the bucket, stack, and function whatever you want. You can find the accountId in your AWS account settings.
"config": {  
  "s3BucketName": "blrplt",  
  "cloudFormationStackName": "blrplt",  
  "region": "eu-west-1",  
  "functionName": "blrplt",  
  "accountId": "xxxxxxxxxxxx"  
}  
  1. You need to run the config script once:
yarn run aws:config  

This adds the variables from the config to the lambda-script runner.

  1. You have to create a IAM user with enough permission. You can check server/aws-policy.json for an example. After you have done this, you have to have your aws-cli installed and set up. Check the docs here.

  2. You run the script to setup script. This will create a new stack in cloudformation and check if everything is set up correctly. yarn run aws:setup

  3. Now you can finally deploy the app. Run yarn run deploy.

  4. Go to cloudformation and find the link to your new app.

DIY hosting

You can also just run the yarn run build script to create a node server script and build all client-side files inside the build folder.
You can put this folder on your server and run node server.js there.

Help!!

If you have any issues using this, please let me know by creating a issue here.

What's with the name?

react-redux-saga-aws-serverless-boilerplate sounded stupid. Also, you can't have a cool project without dropping some vowels.

blrplt's People

Contributors

happylinks avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

blrplt's Issues

Static files

Static files seem not to be loading.

Although the GEt request status is 200 the actual data coming back is the root. (movies html page)

yarn run start:dist

Hi @happylinks, thanks for putting together this boilerplate. I am having testing my build with your webpack files. I thought nodeExternals is supposed to exclude these folders for the server side rending? Do you have any suggestions on how I can get around this?

I am getting this error when I run 'yarn run start:dist'

/Users/prabhaav/Development/blrplt: yarn run start:dist
yarn run v0.18.1
$ node ./build/server.js
/Users/prabhaav/Development/blrplt/node_modules/hellojs/dist/hello.all.js:206
redirect_uri: window.location.href.split('#')[0],
^
ReferenceError: window is not defined
at Object. (/Users/prabhaav/Development/blrplt/node_modules/hellojs/dist/hello.all.js:206:17)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/Users/prabhaav/Development/blrplt/build/server.js:1986:18)
at webpack_require (/Users/prabhaav/Development/blrplt/build/server.js:21:30)
error Command failed with exit code 1.

Issue with React-router 4.1.1

I am facing issues in app.jsx when i update react-router to the latest version.
ServerRouter is removed from the new version of react-router.
Also is it possible to add old plain routes in this new router? since i am new to react, i couldnt able to grab the things properly. Only this repo seems understandable and working nicely.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.