Dealing with a project you generated using an AI tool? If you don’t have programming skills and need to understand the code for an application it can be hard to know where to begin. Perhaps you're discovering that generating the code is just one of many steps in making a successful software application!
In this guide we’ll outline some places to get started learning about a codebase you need to troubleshoot, fix, or extend. We'll start by opening and running the app in a developer environment.
We’ll assume you’re working with a web application, like a website or app users access in the browser – for other types of app the steps here will not work.
Export your code
Well be working in GitHub so if your code isn't already on there you'll need to import it. Most tools provide the ability to download or export your code straight to GitHub. If you download your code, you’ll need to install developer tooling (IDEs like VS Code and dependencies) to actually run your app on your computer. You can alternatively work with your code in the browser, which is a lot easier, so that’s what we’ll focus on here.
Get your code onto GitHub – if the service you’re using doesn’t offer a GitHub export function, you can upload your files straight into a GitHub repository instead.
Add some helper code
We’re going to open the project in a GitHub codespace – this will let you work with it without installing anything on your computer. We'll do this using containers, which let you use a dev environment on the web instead of locally on your own machine.
⚠️ The helper code is based on some assumptions about your project, for example that it’s a web application with a user interface and that it uses a
package.jsonfile. If this is not the case, for example if you’re working with a mobile app, you will encounter errors!
To make the process more likely to work for you, add a file to your repo. Click Add file > Create new file.
Enter .devcontainer/devcontainer.json as the file name.
Paste the following in as the file contents:
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
{
"name": "Ubuntu",
"image": "mcr.microsoft.com/devcontainers/base:noble",
"features": {
"ghcr.io/devcontainers/features/node:1": {}
},
"portsAttributes": {
"3000-9000": {
"label": "App",
"onAutoForward": "openPreview"
}
},
"updateContentCommand": "npm install",
"waitFor": "updateContentCommand"
}
This tells the codespace to install the necessary dependencies for your project and automatically open it when it runs.
Click Commit changes… > Commit changes to save your new file.
Open your project
From your GitHub repo homepage, open your app in a codespace by clicking Code > Codespaces, and creating a new codespace on your main branch.
⏳ The codespace will attempt to provide what we asked it to in the container config file we added, and it might take a few minutes to open.
Take a look around
If you’ve never used an IDE (Integrated Development Environment) before it might look a bit overwhelming, but you’ll get used to it. Codespaces on GitHub use VS Code, which is the most popular IDE around, so if you plan on digging into code more, this is a tool you’ll benefit from getting familiar with.
The files in your project will appear on the left, and you can access other tools in there too. In the middle you’ll see your code editor, which will display the README for your project by default if it has one. You can also open your other files by selecting them from the list on the left. At the bottom you’ll see the Terminal and other tools that help you work on your project.
Does your app have a README file? If so take a look in there in case it includes helpful information on running and developing your code.
Prepare your environment
Check your project for a file named package.json. In most cases web apps use frameworks that rely on the Node.js ecosystem, in which case your project will have this file and you can learn how to run and build it from there.
The package.json file indicates dependencies and scripts for your app. The dependencies are coding resources your app is pulling in from the web – these are utilities your app depends on to deliver its functionality. That’s code developed by other people and organizations, accessed through a registry like NPM.
📝 Dependencies are not the only way your app uses code written by others, if you generated your project using an AI tool, it was most likely trained on data from open source projects, for example on GitHub. The developers who contributed that code didn’t consent to their data being used for this purpose, which is why a lot of them are not happy about it!
In order to run your app, you need to install the necessary dependencies. We set the container config to do that automatically when the codespace opens. With any luck the codespace will install everything you need. If you see any errors in the Terminal area at the bottom, read the output for tips on moving forward. If that doesn’t work, try a web search for the error text.
Run your app
Your README or package.json will indicate how to run your app locally. Check the package.json for a scripts section. Scripts can include start, dev, build, serve, preview, and more depending on the frameworks your app uses.
In your Terminal, try running the scripts as follows. First try either start, or dev. If you don’t have either of those, try build.
npm run start
Watch the Terminal output for updates, checking any errors for further information.
🚧 If your app is using a data source, like a database, you might need to carry out additional steps to run it outside the environment you built it in.
Hopefully your app will run and open a preview on a port. The container config we added will attempt to open it automatically. Most web frameworks use ports to run your app locally while you develop it. Forwarding it to a port means you can open the app at a local address (meaning not accessible over the web, just in your environment) in the web browser.
You can also access your running app using Ports in the Terminal section at the bottom of the editor.
Once your app is open, you can use the split button at the top right and drag the website preview tab over into it.
This lets you see the code as well as the app itself.
Try changing your app code and see what happens! You can always undo your changes.
If you continue working on the app, you’ll need to build and deploy it. Your package scripts will include whatever you need to run in the Terminal to build your app. Once you have a build, you’ll need to deploy it somewhere to share it with your users at an address they can access, unless you’re taking your changes back into the platform you used to generate the code in the first place.
Save your changes
When you’re ready to save any changes you’ve made, click the Source Control button on the left.
Enter some text in the box and click Commit.
Click Yes in the pop up notification, then Sync changes.
Your edits should sync with your GitHub repo. If you’re importing your code back into the platform you started from you can do that now.
Debug your app
Is your app not doing what you want it to? You can debug it in the codespace too. Use the Problems and Debug Console tabs in the Terminal area at the bottom.
To use the VS code debug tools, click into the top text box again and enter >debug then select an option. Choose an option based on the error you’ve been seeing in the output when your app runs, like Debug npm script, choosing the script you entered to run your app (start, or dev).
To open the debug controls in your codespace, choose View: Show Run and Debug.
Click Run and Debug, choosing Node.js. Watch the Debug console for output.
To try the JavaScript Debug Terminal, click the button then run your npm command to start the app again. For best results you'll want to dig into your code and add breakpoints to use in your debugging flow.
Debugging is a whole skillset in itself! There are also lots of extensions you can install in your codespace to help you debug your app. Check out these VS Code tutorials for more:
Get help 🛟
Here’s the thing, learning to code is something you’ll do best with help. There are lots of resources and communities online. Here are a few pointers:
- Does the platform you used to generate your app have a community? Post in there!
- Which frameworks is your app using? They most likely have dedicated community spaces online you can connect to.
- There are also great developer and learning communities, like here on DEV, and over on freeCodeCamp.
If you get really stuck, need your app finished, and have the budget – hire a freelance developer to help you with it!
📻 Later in this series we'll get into learning about your app logic, which will most likely be written in JavaScript or TypeScript if the steps in this tutorial worked for you.
Top comments (0)