Giter Site home page Giter Site logo

danjavia / pwa-reactjs-starter-pack Goto Github PK

View Code? Open in Web Editor NEW
11.0 4.0 4.0 135 KB

Ultimate starter pack for create GraphQL API Apps with ReactJS [DEPRECATED] create-react-app includes now serviceworkers for working with PWA

License: MIT License

HTML 23.23% CSS 11.27% JavaScript 65.50%
pwa react reactjs apollo-client graphql starter-kit starterkit

pwa-reactjs-starter-pack's Introduction

PWA ReactJS Starter Pack

Hi! This repository was made thinking in developers.

Within you can find many useful resources for starting to create a PWA application with ReactJS and GraphQL.

PWA lighthouse

Included Features

  • ReactJS
  • React-Router
  • Hot Reloading
  • Apollo-Client
  • Service Workers included
  • PWA Ready!

Requirements

  • node v6.3.0 or up
  • yarn

Installation

git clone https://github.com/Danjavia/PWA-ReactJS-Starter-Pack.git <awesome-pwa-name>
cd <awesome-pwa-name>
yarn install

After install packages run your Progressive Web Application.

yarn start

And open http://localhost:3000

How to Build Your Project

yarn run build:production

Starting with GraphQL

For easy starting with GraphQL and testing this repo you can start with graphql-up

graphql-up

Here is a GraphQL endpoint ready for using with the starter. It was settled in your .env and .env.local files

You can get more info about Graphql-up on https://graph.cool.

Related starter schema is Here

Deploy Your Progressive Web Application

It's very simple.

You can deploy using Surge.sh cli

For installing it's simple to run.

yarn global add surge

After in the project root

surge

Select the build folder and press enter.

Set Environment Variables

Set your environment variables within .env. files using the REACT_APP_ prefix for your environment variables

e.g.

//.env.local
REACT_APP_MY_CUSTOM_ENV_VAR=https://awesome.site

This values would appear in your compiled code after run

// development environment
yarn start

or

// production environment
yarn run build:production

or

// staging environment
yarn run build:staging

You can use your env var using process.env.REACT_APP_MY_CUSTOM_ENV_VAR in your project.

Tests

This package includes a sample with a little test for components. You can run it using.

yarn run test

License

Show LICENSE

pwa-reactjs-starter-pack's People

Contributors

bound3r avatar danjavia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

pwa-reactjs-starter-pack's Issues

service-worker.js is missing

bildschirmfoto 2017-04-04 um 10 59 13

I think the service-worker.js file is missing in this repository. Can you add an example for this starter pack?

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.