Code Monkey home page Code Monkey logo

foundation.mozilla.org's Introduction

foundation.mozilla.org

Build Status Dependency Status Dev Dependency Status Uses Mofo Standards Code Coverage

Table of contents

Setup

Setup with Docker

Local development with invoke and pipenv

Local development with Docker

Engineer Workflow

OPS and Heroku Settings

Scheduled Task

Stack

How to Setup your Dev Environment with Pipenv and Invoke

Requirements: Node, npm, git, python3.6 or later, pip, pipenv, invoke, gettext.

If you installed Python with Homebrew, use pip3 install instead of pip install when installing the relevant requirements.

Check your environment

  • python --version should return 3.7 or higher,
  • pipenv --version should return 11.10 or higher,
  • invoke --version should return 0.22.1 or higher,
  • gettext --version should return 0.20.1 or higher.

Setup steps

Run the following terminal commands to get started:

  • git clone https://github.com/mozilla/foundation.mozilla.org.git
  • cd foundation.mozilla.org
  • inv setup

If you're on windows, you need an extra step: run inv manage createsuperuser to create an admin user.

You're done ๐ŸŽ‰

To catch up on new dependencies, migrations, etc. after initial setup, you can use the inv catch-up command.

For more information on how to run this project, check the local development with invoke and pipenv documentation.

Testing

Code tests

When relevant, we encourage you to write tests. You can run the tests using inv docker-test, or you can run the Node and Python testing suites separately:

  • Run Node tests: inv docker-test-node
  • Run Python tests: inv docker-test-python

Visual regression tests

In addition to the code tests there are also visual regression tests, located in the ./cypress/integration directory. You can run these tests locally by installing cypress using npm i [email protected], after which the command npm run cypress will run these tests locally. However, note that these tests are currently intended for screenshot comparisons across branches, and so will not yield any meaningful results when run for a single branch.

Accessibility tests (a11y tests)

Accessibility tests are not part of the standard tests covered by inv test. You can run them using

  • inv docker-npm "run a11y"

How to Setup your Dev Environment with Docker

  • Install Docker Desktop (macOS and Windows). For Linux users: install Docker CE and Docker Compose. If you don't want to create a Docker account, direct links to download can be found in this issue,
  • Check your install by running docker run hello-world,
  • If relevant: delete your node_modules directory (rm -rf node_modules). It's not necessary, but it speeds up the install.
  • Run invoke docker-new-env (install invoke if you don't have it yet). If you're running on Windows, you need to run docker-compose --rm pipenv run python network-api/manage.py createsuperuser when the setup is finished.

This task is creating a .env that is in charge of managing your environment variables while running Docker. The installation will take a few minutes: you need to download images from the Docker Hub, install JS and Python dependencies, create fake data, migrate your database, etc.

When it's done, run docker-compose up, wait until the static files to be built, and go to 0.0.0.0:8000. You should have a local working version of the foundation site with fake data. When you want to stop, do ^C to shut down your containers.

For more information on how to run the project with Docker, check the local development with Docker documentation.

Mozilla Festival

The fake data generator can generate a site structure for the Mozilla Festival that can be served under it's own domain, or in the case of review apps on Heroku, where we're limited to a single domain, as a sub-directory of the main foundation site, at {review_app_host}/mozilla-festival.

In order to access the Mozilla Festival site locally on a different domain than the main Foundation site, you'll need to edit your hosts file (/etc/hosts on *nix systems, C:\Windows\System32\Drivers\etc\hosts on Windows) to allow you to access the site at mozfest.localhost:8000. To enable this, add the following line to your hosts file: 127.0.0.1 mozfest.localhost

Gotchas

As this is REST API and CMS built on top of Django, there are some "gotcha!"s to keep in mind due to the high level of magic in the Django code base (where things will happen automatically without the code explicitly telling you).

DEBUG=True

The DEBUG flag does all sorts of magical things, to the point where testing with debugging turned on effectively runs a completely different setup compared to testing with debugging turned off. When debugging is on, the following things happen:

  • Django bypasses the ALLOWED_HOST restrictions, which again can lead to 400 Bad Request errors in DEBUG=False setting.
  • Rather than HTTP error pages, Django will generate stack traces pages that expose pretty much all environment variables except any that match certain substrings such as KEY, PASS, etc. for obvious security reasons.
  • ...there are probably more gotchas just for DEBUG so if you find any please add them to this list.

Translations

Translations of UI strings (from the Django and React apps) are stored in the fomo-l10n repository. Translations are happening in Pontoon, in multiple projects: Foundation website, *Privacy Not Included and Mozilla Festival.

The latest source strings are regularly exposed to Pontoon by a Localization PM using the following process:

Initial setup:

  • Clone the fomo-l10n repository locally.
  • Set the LOCAL_PATH_TO_L10N_REPO variable in your .env file. Use the absolute path to your copy of the fomo-l10n repository and include the trailing slash. E.g. LOCAL_PATH_TO_L10N_REPO=/Users/username/Documents/GitHub/fomo-l10n/

Exposing latest source strings:

  • Make sure your local repositories of fomo-l10n and foundation.mozilla.org are matching the latest revision from master.
  • Run inv docker-makemessages from your foundation.mozilla.org repository.
  • Files should have been updated in your fomo-l10n repository. You can now create a pull-request.

Getting the latest translations for local dev

Latest translations are uploaded to S3. To get them, run:

  • curl -o translations.tar https://foundation-site-translations.s3.amazonaws.com/translations.tar
  • tar -C network-api -xvf translations.tar

You don't need to run compilemessages and it works for both pipenv or docker workflows.

The translations_github_commit_[...] file from the archive is only used for debug purposes on Heroku. It can be safely deleted if needed.

Contributing

We love contributors, but the team maintaining this project is small and not structured to significantly support new and inexperienced contributors. If there's an unassigned issue that catches your eye, feel free to open a PR for it, but keep in mind our support will be limited. We usually don't have the capacity to walk you through the process of spinning up the project, opening a PR or describing what the solution to the issue could be.

foundation.mozilla.org's People

Contributors

gvn avatar pomax avatar mmmavis avatar dependabot-preview[bot] avatar dependabot[bot] avatar alanmoo avatar patjouk avatar scottdowne avatar theochevalier avatar taisdesouzalessa avatar gideonthomas avatar amit-jha-cmd avatar ragnarokatz avatar jayyyin avatar pramodjais517 avatar piotrdrag avatar obrennomartins avatar muddlebee avatar xmatthewx avatar harshs14 avatar 0xekez avatar youriwims avatar w3x10e8 avatar vishnkr avatar sukhnandanmalhotra avatar sugnay avatar simonwex avatar solarissmoke avatar irrationalrock avatar lejara avatar

Watchers

James Cloos avatar

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.