Note: Before following the below steps ensure you have already created your new repo in Github.

1. Log in (or Register) to Heroku and from your dashboard click 'new' > 'create new app'.

2. Enter your 'App name' and choose the appropriate region, then click 'Create app'.

3. Then on the 'Resources' tab, search and add on the Heroku Postgres database.

4. To use Postgres, install dj_database_url, and psycopg2 in the project terminal using the following commands;

   $ pip3 install dj_database_url

   $ pip3 install psycopg2-binary

5. Freeze the requirements to ensure Heroku installs all the apps requirements when deployed using the following command;

   $ pip3 freeze > requirements.txt

6. To migrate to the Postgres, go to settings.py and add the following import;

   import dj_database_url

   Then down in the databases setting comment out the default configuration and replace the default database with a call to dj_database_url.parse and give it the database URL from Heroku which can be found under the Heroku app setting config vars.

7. Apply all migrations using the following command;

   $ python3 manage.py migrate

   After migrations have been applied you will need to reupload the fixtures to the heroku database using.

   $ python3 manage.py loaddata categories $ python3 manage.py loaddata products

   Your database should now be set up on heroku, when looking at the deloyed site you will notice a noticeable slow download speed which will improve later in the process.

8. Create a superuser to log in with using the following command;

   $ python3 manage.py createsuperuser

9. Go to the Settings tab on Heroku, scroll to the 'Config Vars' section, and click 'Reveal Config Vars'.

   Enter the variables (key and value) contained in your gitpod environment setting. The keys are listed below and values are inputted by the user.

10. Install gunicorn using the following command;

    $ pip3 install gunicorn and then:

    $ pip3 freeze > requirements.txt

11. Create a Procfile and add:

    web: gunicorn xeption.wsgi:application

    This tells Heroku to create a web dyno which will run gunicorn and serve the Django app.

12. Then you need to temporarily disable collectstatic to ensure that Heroku won't collect static files on deployment. This is done by adding the below variable;

    | DISABLE_COLLECTSTATIC | 1 |

13. Add the hostname of Heroku app to allowed hosts in settings.py

14. Now you can commit all the changes and push to GitHub;

    $ git add . $ git commit -m <'your commit message'> $ git push

    If you created your app on the website you will need to initialize your Heroku git remote using the following command;

    $ heroku git:remote -a xeption

    Then use the following command to push to Heroku;

    $ git push heroku master

The project uses Amazon Web Services s3,a cloud-based storage service, to store static and media files.

1. Create an account by navigating to aws.amazon.com and clicking create an AWS account. Fill in your email and password, and a username for your account, and select continue.

2. Now on the account type page, select personal and fill out the required information, click create an account and continue.

3. Next you will be asked to enter a credit card number which will be used for billing if we go above the free usage limits. Beyond this, you'll be asked a couple more verification questions then once all required information is confirmed your account will be created.

   Note: For this project, I didn't go anywhere near the usage limits but keep in mind that AWS is not free if you go above the free usage limits.

4. Now you can navigate back to aws.amazon.com and sign-in to your account.

5. Navigate to AWS management console under my account and using the 'find services' search bar, find s3.

6. Now open s3 and create a new bucket to store all your files.

• Enter a name for your bucket

• Select a region (select your geographically closest region)

• Uncheck block all public access and acknowledge that the bucket will be public.

• Click create bucket and your bucket should be created.

7. Now click into your new bucket and set some settings;

• On the properties tab and turn on static website hosting.

• On the permissions tab

  • Paste in a CORS Configuration to set up the required access between your Heroku app and this s3 bucket. Copy the code below supplied by CodeInstitute;

    [
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
    ]
    

  • In the Bucket Policy tab, select policy generator

    • Policy type is 's3 bucket policy'

    • Allow all principles using a *

    • Actions is 'GetObject'

    • Add in your ARN (found on previous page)

    • Click 'Add statement' then 'Generate policy'

    • Copy the policy code and paste it into the bucket policy editor

      Note: To allow access to all resources in this bucket add a slash star onto the end of the resource key.

    • Click save

  • In the Access Control List tab, under the Public Access section, set the list objects permission to everyone.

8. Create a user to access the bucket created.

• Search for a new service 'IAM'
• Now open IAM, navigate to 'groups' and click 'Create new group'
• Create a policy by navigating to 'policies' and click 'Create policy'
• Go JSON tab and click 'import managed policy'

  • Search for s3 and then import the s3 full access policy.

    • Replace resource value '*' with your bucket ARN from the bucket policy page;

    "Resource": [ "arn:aws:s3:::xeption-ms4", "arn:aws:s3:::xeption-ms4/*" ]

  • Click 'Review policy', give it a name and a description and click 'Create policy'

9. Attach the policy to the group you created.

• Navigate to 'groups', select the group you created and on permissions tab select 'Attach policy'.

• Search for the policy you created, select it and click 'Attach policy'.

• Now to create the user, navigate to 'users' and click 'Add user'

  • Add username, select programmatic access and click 'Next'
  • Add user to a group by selecting the group you created and click 'Next' then click through to the end and click 'Create user'
  • Now download the CSV file which will contain this users access key and secret access key

10. To connect to Django, head to your project and install two new packages then freeze them into your requirements.txt;

• $ pip3 install boto3
• $ pip3 install django-storages
• $ pip3 freeze > requirements.txt

11. In settings, add 'storages' to installed apps.

12. To connect Jdango to s3 add the below settings in settings.py which will tell it which bucket it should be communicating with;

    if 'USE_AWS' in os.environ:
        AWS_STORAGE_BUCKET_NAME = 'xeption-ms4'
        AWS_S3_REGION_NAME = 'eu-west-2'
        AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
        AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
        AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
    

13. Create a file called custom_storages.py and add the content below;

    from django.conf import settings
    from storages.backends.s3boto3 import S3Boto3Storage
    
    
    class StaticStorage(S3Boto3Storage):
        location = settings.STATICFILES_LOCATION
    
    
    class MediaStorage(S3Boto3Storage):
        location = settings.MEDIAFILES_LOCATION
    

    Then in settings.py add the below:

    STATICFILES_STORAGE = 'custom_storages.StaticStorage'
    STATICFILES_LOCATION = 'static'
    DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
    MEDIAFILES_LOCATION = 'media'
    
    STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
    MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
    

1. From the Heroku deploy tab, select the Deployment method 'GitHub'.

2. On the 'Connect to GitHub' section make sure your GitHub profile is displayed then add your repository name and click 'Search'.

3. Your repo should now be displayed below, click 'Connect' to connect to this app.

4. Go to the Deploy tab on Heroku and under the Automatic deployment section, click 'Enable Automatic Deploys'. Then under Manual deploy click 'Deploy Branch'.

   • Heroku will now receive the code from GitHub and start building the app using the required packages.
   • Once built you will receive the message 'Your app was successfully deployed' and you can click 'View' to launch your new app.

Forking allows you to create a copy of the original repository and propose changes to the repository owner via a pull request.

1. Log in to GitHub and locate the GitHub Repository. Xeption repository can be found here

2. At the top of the Repository (not top of page) just above the "Settings" button on the menu, locate the "Fork" button.

3. You should now have a copy of the original repository in your GitHub account.

From GitHub, click on the "Clone" button.

Choose "Download Zip" (The download starts).

After the download is complete, open the zip folder by double clicking to access created page.

Set up a virtual environment if you have not already done so.

Activate your virtual environment, please see the Python Documentation on virtual environments for further instructions.

Install any required module and freeze them into requirements.txt.

Create a new file env.py at the base directory.

Copy all your secret keys from settings.py and paste into env.py file.

Then complete the process by running migration, createsuperuser, preload products and tags, then runserver.

Finally, ensure to run the following command whenever changes are made to static files.

                ```
                python3 manage.py collectstatic
                ```