Start typing to search...
Developer DocsAPI Reference
Back to withkoji.com

Publish your local projects

In the previous section of this tutorial, you learned how to use Git to clone a Koji project to your development machine and how to install and launch a Node.js server to run your project locally.

In this section, you will learn how to push the changes that you make locally to your project’s origin repository, and how to pull the latest version of your project into the Koji editor, where you can publish it to the world.

Note
 It is recommended that you test the publishing process before you get deep into development locally. You can make a minor change, push it back to the Koji servers, and check that the change is visible in the published app on Koji.

Learning objectives

By the end of the section, you should feel comfortable:

  • Making and testing changes locally.

  • Publishing your changes to the Koji server.

  • Pushing your changes to the origin repository, and then pulling them into the Koji editor.

Prerequisites

  • Follow the first two sections to set up the Falling Objects game on your development machine.

Making a change in the source code

Let’s make a small change in the Falling Objects game, just for testing purposes.

  1. Open frontend\src\Components\View\LeaderboardMini.js. Change <Title>{"Top Players"}</Title> to <Title>{"Leaderboard"}</Title> and save the file.

  2. In your browser, go to http://0.0.0.0:8080, and make sure the leaderboard shows the new title.

Publishing your changes to the Koji server

To make a local change visible on Koji server, you must use Git to commit your changes locally and then push the committed changes to the remote Koji repository. Pushing the changes automatically publishes the app.

Committing changes locally

The Git version control system keeps track of every change you make the files in your project. To see which files have changed, use the command git status.

Note
 The .gitignore file at the root of your project lists the files that Git does not track for changes. You might not see the file if your operating system is configured to hide files whose names begin with a dot. In particular, this file tells Git to ignore any changes to files in the node_modules folders, which were created when you ran npm install in the frontend and backend folders.

When you are ready to test your changes on the Koji server, use Git to commit your changes locally.

  1. Open a terminal window and go to the root directory of your project (for example, MyKojiApp).

  2. Run the following Git commands.

    $ git add . (1)
$ git commit -m "your comments" (2)

    1. Processes all the documents that you have changed.

    2. Creates an updated version of your project.

    Note

    Be sure to replace your comments with a brief description of the changes that you have made, so that you will be able to remember what features you were working on.

    For a more complete description of the git add and git commit commands, see this tutorial.

Pushing changes to the Koji repository

After the commit process is successfully completed, you use Git to upload the committed changes to the repository on the Koji servers.

  1. Open a terminal window and go to the root directory of your project.

  2. Run the following command.

    git push origin master

  3. At the username prompt, enter your username on Koji and press Enter.

  4. At the password prompt, enter the access key that you generated in a previous tutorial and press Enter.

    Your terminal will look something like this:

    $ git push origin master (1)
Counting objects: 21, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (21/21), done.
Writing objects: 100% (21/21), 84.53 KiB | 0 bytes/s, done.
Total 21 (delta 15), reused 0 (delta 0)
Username for 'https://projects.koji-cdn.com': KojiCoder
Password for 'https://KojiCoder@projects.koji-cdn.com': (2)
To https://projects.koji-cdn.com/a70f8329-e89e-48b0-8d85-7658c1542b9f.git
  a88036c..ea6bda1  master -> master

    1. Use Git to upload your new version to the Koji repository

    2. Paste your 32-character access key.

Note
 Pushing your changes to origin automatically publishes a new version of your app.

Testing your published app

Now that you’ve published your app, you will want to make sure that it works the same on the Koji server as it does locally.

  1. On the Koji home page, click your profile button and select Developer Portal.

  2. Select your app from All Projects.

  3. Click View Published Koji. The published version of your app opens.

  4. Proceed to test all the features of your app.

    Tip
    		 For tips on testing your app, visit Testing and debugging apps.

Updating the Koji code editor to match your local environment

If you want to use the Koji code editor after you make changes locally, you must pull your changes into it and update the Node modules to match your local environment.

Pulling changes into the Koji editor

The Koji editor uses its own repository, which is different from the origin repository to which you pushed your changes. So, if you want to go back to using the Koji editor, you will have to pull the changes from the origin repository.

  1. Open your project in the Koji editor.

  2. Open a new terminal tab and run the following command.

    git pull origin master

    Your terminal will look something like this:

    root@ip-172-31-12-226:/usr/src/app# git pull origin master
remote: Counting objects: 13, done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 13 (delta 11), reused 0 (delta 0)
Unpacking objects: 100% (13/13), done.
From https://projects.koji-cdn.com/d29a69ff-f413-45bb-a364-a6bee40eea91
 * branch            master     -> FETCH_HEAD
   0cafbcd..9633a51  master     -> origin/master
Updating 0cafbcd..9633a51
Fast-forward
 frontend/src/Components/Remix/index.js          | 569 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------
 frontend/src/Components/View/Leaderboard.js     | 456 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------
 frontend/src/Components/View/LeaderboardMini.js | 373 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------
 3 files changed, 673 insertions(+), 725 deletions(-)
root@ip-172-31-12-226:/usr/src/app#
root@ip-172-31-12-226:/usr/src/app#

    The code in the Koji editor should now be identical to the code in your local repository.

  3. In the top right of the Preview pane, click Refresh to make sure you are seeing the latest version.

    You should now see the custom title, which corresponds to the local change you made in frontend\src\Components\View\LeaderboardMini.js.

Updating the Node modules for the Koji editor

If you installed new or updated Node modules locally, you must also install these versions on the Koji server. For example, if you ran npm audit fix to update all the Node modules to their most recent stable release, the dependencies for the backend and the frontend servers might have changed. The package.json and package-lock.json files in the backend and the frontend directories should contain the information needed to update your Node modules to the correct versions.

  1. In the Terminal pane, click the frontend tab.

  2. Press Ctrl+C to cancel the running process.

  3. Run the following command.

    npm install

    NPM installs the files listed in the package-lock.json file for the frontend service.

  4. When the installations are finished, run the following command.

    npm start

    Your terminal will look something like this:

    ^C
root@ip-172-31-15-216:/usr/src/app/frontend# npm install
npm WARN meta-project@1.0.0 No repository field.
npm WARN meta-project@1.0.0 No license field.
... (more warnings and comments not shown) ...

audited 12334 packages in 5.192s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
root@ip-172-31-15-216:/usr/src/app/frontend# npm start
... (more output not shown) ...

ℹ ｢wds｣: Compiled successfully

  5. In the Terminal pane, click the backend tab.

  6. Press Ctrl+C to cancel the running process.

  7. Run the following command.

    npm install

    NPM installs the files listed in the package-lock.json file for the backend service.

  8. When the installations are finished, run the following command.

    npm run start-dev

    Your terminal will look something like this:

    ^C
root@ip-172-31-15-216:/usr/src/app/backend# npm install
npm WARN koji-project-backend@1.0.0 No description
npm WARN koji-project-backend@1.0.0 No repository field.
... (more warnings and comments not shown) ...

audited 8550 packages in 2.729s
found 0 vulnerabilities

root@ip-172-31-15-216:/usr/src/app/backend# npm run start-dev
... (more output not shown) ...

[koji] backend started

Wrapping up

This tutorial has taken you on a round trip from the Koji editor to your local development environment and back again. You have seen changes that you made locally served live from the Koji servers. As you develop your project, you will cycle through many such loops, adding and refining features and testing that everything works just as well from the Koji servers as from the comfort of your own development machine.

In particular, you have seen how to:

  • Clone a remixable Koji project onto your development machine (part 1).

  • Install a Node.js server environment and run your project locally (part 2).

  • Make and test changes locally.

  • Push your changes to the origin repository, and then pull them into the Koji editor.

  • Publish your changes to the Koji server.

  • Test that your app works the same live on a Koji server as it does locally.

You’re now ready to start developing your Koji app in earnest, in the development environment where you feel most comfortable. Let your creativity shine!