Setting up trello app

Setting up trello app

We are about to meet on

and I hope you are looking forward to it as much as I do ūüėÉ. These are preparation instructions that will help you out with preparation for the workshop. Please don‚Äôt delay this to the last minute, because if any problems occur, we‚Äôll have more time to iron them out. If there‚Äôs anything that does not work, please contact me and I‚Äôm sure we‚Äôll be able to solve it all.

Requirements

  • Node.js v16 or higher
  • git v2.3 or higher
  • Code editor (VS Code, Webstorm or any other)
  • Terminal or other Command line interface (Bash, Zsh)

Installation

Open your terminal or the command line and type these commands:

git clone https://github.com/filiphric/.git
cd
npm install

If you have ever installed a project from GitHub, this should be easy. If not, I’m sure you’ll manage. But if any problems occur, check out the troubleshooting section of this article.

Check the installation

Once you cloned the repository and used npm install to install the app, you should be able to run npm start command. It’s best if you use a text editor for this. I will be using VS Code for the workshop, which you can download here.

Open the workshop repository folder and in the top bar click on "Terminal" and choose "New Terminal".

ūüí° TIP: You can drag and drop your folder into VS Code to open it

Opening terminal

If you have gone through the initial steps (clone, install), you should be able to run the app with npm start command. Make sure you are opening the terminal in the workshop folder (you can check that by typing "pwd" into your command line). You should see the following message and be able to see the application in your browser on url http://localhost:3000 Application running You should see a running application that looks something like this: Application in browser

Running Cypress

Open a new terminal window in your editor and open Cypress using one of these commands:

Copy to clipboard
undefined
Copy to clipboard
undefined

If at least one of them works, great¬†ūüĎ欆You should see a window like this: ¬†

Cypress

Troubleshooting

If one or more checks don’t work, please reach out to me. We can make a call and solve it. It is necessary to solve all the problems before the workshop, otherwise it might be hard to get back on track. Here are couple of tips for most common issues:

git clone command does not work 

If you see a message like this:

Copy to clipboard
undefined

there’s a good chance you don’t have git installed. Installation instructions are here. If everything fails, there is an alternative way. Visit the repository site, click the arrow next to the green "code" button and pick the option "download zip". Unzip the project, open it in VS Code and continue with the npm install step

npm install command does not work

You see the error:

Copy to clipboard
undefined

In this case, it is possible you don’t have node.js installed. Please go to https://nodejs.org and install node.js according to the installation instructions. There’s a good chance you’ll need to restart VS Code after the installation

npm start throws an error

There are two possible errors here:

  1. if you see an error similar to Error: Cannot find module 'worker_threads' then it is possible you have an older version of Node.js installed. Try checking that by typing the node -v command into your terminal. If it returns version older than v14, please go to https://nodejs.org and install latest version of Node.js 
  2. if you see an error like 'vite' is not recognized as an internal or external command it may be that the installation didn’t go properly for Trello app. Use your terminal to go to trelloapp folder and trigger installation from that folder by using following commands:
Copy to clipboard
undefined

npx cypress open throws an error

You see something like: Command timed out after 30000 milliseconds - in this case, try repeating the command or turn off your VPN (if you have one). Cypress does a verification check when opened for the first time. If this takes longer than 30 seconds it will time out. You can also try to run the command like this: CYPRESS_VERIFY_TIMEOUT=60000 npx cypress open and increase the timeout

Contact me

If for any reason something is not working, feel free to contact me via email, or DM me through LinkedIn, Twitter or Discord

About Trello app

This application is a project to help drive my workshops. It is a simplified real-world app, through which you can explore different testing problems. I usually add this project as a submodule in my workshops, but you can take a look into it on GitHub. Trello app is written in Vue 3, TypeScript and uses a json-server as a backend.

Let’s keep in touch

From time to time I send some useful tips to your inbox and let you know about upcoming events. Sign up if you want to stay in loop.

is required.

I treat your email address like I would my own. That means no ads. Just notifications of when I do cool stuff. Unsubscribe anytime. Click here to read about how I handle your data