Skip to content

Latest commit

 

History

History
182 lines (153 loc) · 6.67 KB

CONTRIBUTING.md

File metadata and controls

182 lines (153 loc) · 6.67 KB
Raw

Contribute to devSwag

Thank you for working to make devSwag better! 🎉

We have a very simple code of conduct - please ensure you uphold it!

We're working on creating an in-depth documention on how to set up the website for development - in the meantime, if you have any questions, feel free to drop by our lobby.

What's a contribution?

You might be wondering what a contribution is. Here are some things that you can do:

Thanks again, we hope to see you soon! ❤

How do I add a Swag Opportunity?

  1. Open an issue here or implement one that already exists
  2. Fork the repository
  3. Edit data.json to add your swag opportunity. Please keep it in alphabetical order, and use the date the issue was first posted.
  4. Open a pull request and fill out the entire template.
  5. Well done! Soon the swag will be on the site!

Let's start hacking!

Start one-click with Gitpod

Contribute to swag-for-dev using a fully featured online development environment that will automatically: clone the repo, install the dependencies and start the webserver.

Open in Gitpod

Start using NPM

  1. Clone this repository by running
git clone https://github.com/swapagarwal/swag-for-dev.git
  1. Ensure you are running an up-to-date version of Node.js on your machine, that you have npm and nvm installed.
  2. Open a terminal in the swag-for-dev directory. Type 
    nvm install
nvm use
    in to the terminal to select and install the right NodeJS version. Then proceed with 
    npm ci
    into to install the dependencies. To start the webserver, type 
    npm start
  3. The website should open in a browser after it compiles, or you can view it by going to http://127.0.0.1:8000
  1. To build a production release, type 
    npm run build
  2. Dist is now ready in the swag-for-dev/dist directory. You can use any web-server to preview it in your browser. One way is using http-server module directly from npm as follows 
    npx http-server -p 8000 ./dist

Start using Docker

  1. Clone this repository by running
git clone https://github.com/swapagarwal/swag-for-dev.git
  1. Ensure you are running an up-to-date version of Docker on your machine.
  2. Open a terminal in the swag-for-dev directory. Type 
    docker build -t devswag:dev --target base .
    to build a docker image devswag:dev.
  3. You now have to run this image with 
    docker run -it --rm \
-v $(pwd)/data.json:/devswag/data.json \
-v $(pwd)/src:/devswag/src \
-v $(pwd)/gulpfile.js:/devswag/gulpfile.js \
-v $(pwd)/scripts:/devswag/scripts \
-v $(pwd)/dist:/devswag/dist \
-u $(id -u):$(id -g) \
-p 8000:8000 -p 35729:35729 devswag:dev
  4. You can view the website after it compiles by going to http://127.0.0.1:8000

Tip: You can use an alias to ease the terminal use, simply type

 alias devswag='docker run -it --rm \
-v $(pwd)/data.json:/devswag/data.json \
-v $(pwd)/src:/devswag/src \
-v $(pwd)/gulpfile.js:/devswag/gulpfile.js \
-v $(pwd)/scripts:/devswag/scripts \
-v $(pwd)/dist:/devswag/dist \
-u $(id -u):$(id -g) \
-p 8000:8000 -p 35729:35729 devswag:dev npm run'

and use it like

devswag start # start in dev mode
devswag lint # lint code
devswag build # build production release
  1. To build the production container, move to swag-for-dev directory. Type 
    docker build -t devswag .
    will build a docker image devswag.
  2. To run it and serve the content via nginx web-server, type 
    docker run -it --rm -p 8000:80 devswag
  3. Your production build is served, you can view it by going to http://127.0.0.1:8000
  4. The built release can be extracted to the my-devwag-release folder from a running container by typing 
    BAREID=$(docker create devswag)
docker cp $BAREID:/usr/share/nginx/html/devswag my-devswag-release
docker rm $BAREID

We leverage docker multi-stage builds to have the tiniest images as possible, but this feature does not automatically deletes images of intermediate stages from now. To manually clean remaning images after building, you can run

docker image prune --filter label=stage=intermediate

Optimizations

Docker production image has a default nginx configuration file that implements caching rules and basic security headers. You may want to take a look at netlify.toml to configurate your own production server.

docker-compose.yml example

version: '3.4'
services:

    # Production release
    prod:
        image: devswag
        build:
            context: .
        ports:
        - 8000:80

    # Development release
    # To use the following service, you may have to export
    # the $UID and $GID variables from bash before using
    # docker-compose command. Here's how:
    # $ export UID=$(id -u)
    # $ export GID=$(id -g)
    #
    # UID defaults to 1000
    # GID defaults to 1000
    dev:
        image: devswag:dev
        build:
            context: .
            target: base # only build dev
        volumes:
        - ./data.json:/swag-for-dev/data.json
        - ./site/src:/swag-for-dev/site/src
        - ./site/dist:/swag-for-dev/site/dist
        - ./site/.eslintrc:/swag-for-dev/site/.eslintrc
        - ./site/gulpfile.js:/swag-for-dev/site/gulpfile.js
        environment:
            GULP_LISTEN_HOST: 0.0.0.0
            GULP_LISTEN_PORT: 8000
        ports:
        - 8000:8000
        - 35729:35729
        user: "${UID:-1000}:${GID:-1000}"
        command: npm start