Local Development

Hosts

To access a particular agent add a _host query param with the .agent url for the agent domain.

Eg. site

http://localhost:3000?_host=rampton-baseley.agent.homeflow.co.uk
Copy

This query param is then stored in the _host cookie. You may need to refresh the page a few times or manually update the _host cookie when switching between the site and admin.

If working across multiple different sites at the same time, relying solely on the _host cookie can be frustrating due to the time taken for the cookie to update in the browser. In this case it can be helpful to set a new host to work in the site in /etc/hosts.

Eg. /etc/hosts

127.0.0.1	my-agency.agent.v4.homeflow.co.uk
Copy

Then visit http://my-agency.agent.v4.homeflow.co.uk:3000/

This avoids having to rely on the _host cookie to switch between different sites.

Database Access

To Connect to the v4 staging MongoDB, you will need to run an SSH tunnel.

You can do that with the following command (replace user with your username):

ssh -N -L 8650:docdb.websites-v4.staging.route53.homeflow:27017 user@18.169.225.1 -o ServerAliveInterval=5 -o ServerAliveCountMax=1
Copy

You can also use the SSH Tunnels program. See the Confluence docs for further information about SSH tunnels.

Database management

Once connected to the staging MongoDB, you have two options to manage it:

• MongoDB Compass: GUI to easily visualize and run queries.
• MongoDB Shell/Mongosh: A command line tool to visualize, run queries and perform updates MongoDB Compass doesn't support

To install either of the database management tools, first you will need to copy the value of .homeflow.yaml.authentication.user_secret Once you have the user_secret, update the following command and copy it:

mongosh 'mongodb://docdb_staging_websites_v4:your_user_secret@localhost:8650?directConnection=true&retryWrites=false
Copy

And connect to the database the way you normally do first.

To install and run Compass, just follow the steps from their documentation and simply use the command you copied to open a new connection.

To install mongosh follow the steps from their documentation. Once successfully installed, run:

mongosh 'mongodb://docdb_staging_websites_v4:your_user_secret@localhost:8650?directConnection=true&retryWrites=false

use websites_v4
Copy

Feature Toggles

Similarly, if you need to connect to the Homeflow Feature Toggles Redis server, you will need to run an SSH tunnel.

You can do that with the following command (replace user with your username):

ssh -N -L 63793:feature-toggles-redis.aboarl.ng.0001.euw2.cache.amazonaws.com:6379 user@18.169.225.1 -o ServerAliveInterval=5 -o ServerAliveCountMax=1
Copy

or using SSH Tunnels linked above.

After that you can set HOMEFLOW_FEATURE_TOGGLES_REDIS_URL=redis://127.0.0.1:63793 in your .env.local to connect to the remote server.

Debugging

Adding breakpoints to client side code is as simple as adding a debugger; statement, which should open the debugger in your browser's DevTools. To add breakpoints in server side code, some extra steps are required. For full details see the Next.js Guide on debugging.

In order to enable breakpoints in server side code using the Node.js Inspector, you must run the Next.js dev server with NODE_OPTIONS='--inspect'. A convience script, yarn dev:debug, has been added to the package.json to make this simpler and allow you to still run the dev server without the Inspector if preferable.

• Visit chrome://inspect/, if you are working on the Chrome browser (there are guides online for how to set up the Node debugger on other browsers, like Firefox)
• Click Configure and add both localhost:9229 and localhost:9230 if they're not already present
• Look for the Next.js dev server in the Remote Target section
• If there are two targets, look for the one that ends /websites_v4/node_modules/next/dist/server/lib/start-server.js
• Click Inspect to open the DevTools in a separate window and visit Sources
• Be aware, you will need to follow the previous steps after starting the dev server with yarn dev:debug but before visiting a page on localhost:3000 as the Inspector needs to be attached before hitting a debugger; breakpoint
• If you restart your dev server you will need to close the Inspector and reattach it before visiting localhost:3000
• Now, add a debugger; statement to some server side code and you should hit your breakpoint in the DevTools