profitdecoder-webapp

Main repository for Profit Decoder webapp code development.

Requirements

It is recommended that you use pnpm for all work done in this repository. The pnpm package can be installed using the following command in your terminal:

npm i -g pnpm

When making any changes to the files on your local device, please make sure that they are on a branch separate to the master/origin branch. No changes should be pushed directly to the master branch.

more requirements TBD

Setting up the development environment

Before setting up this repository on your local machine, please make sure to read the Requirements section to avoid any errors.

The following steps have been created for use with a Windows operating system and Visual Studio Code as the text editor. Please be sure to adjust any steps according to your device specs.

Step 1 - Clone this repository

To begin using this repository clone it to a location on your local device.

Step 2 - Install all dependencies and tools

Once the repository has been cloned to your local device, navigate to the "profitdecoder-webapp" directory and enter the following command in your terminal:

pnpm install

This will start downloading all the dependencies listed in the package.json file.

If needed, you can also install Playwright using the following command:

pnpm playwright install

If using Visual Studio Code, it is recommended that you install the following extentions for formatting and error detection:

• Prettier - Code formatter
• ESLint

Step 3 - Start the localhost

After all the dependencies have been successfully installed you can start making changes to the files. You can see a detailed explanation of the file structure in the Profit Decoder Documentation linked in Additional resources.

To start serving the files for the development environment, run the following command in your terminal:

pnpm dev

This will trigger the following actions:

• esbuild is set to watch mode. Every time that you save your files, the project will be rebuilt.
• A local server is created under http://localhost:3000 that serves all your project files.

Note that any new files that you want to have served from localhost will need to be added In bin/build.js by updating the entryPoints variable with the path of the new file:

const entryPoints = [
  'src/global.js',
  'src/home.js',
  'src/choose-advisor.js',
  'src/scenarios.js',
  'src/sales.js',
  'src/pick-variable-costs.js',
  'src/variable-costs.js',
  'src/pick-fixed-costs.js',
  'src/fixed-costs.js',
  'src/profitability-analysis.js',
  'src/sales-units.js',
  'src/seasonality.js',
  'src/changing-costs.js',
  'src/changing-price.js',
  'src/profitability-plan.js',
];

This will tell esbuild to build all those files and output them in http://localhost:3000 for development.

Step 4 - Create the changeset

Once you have finished making the necessary changes to the files, create a changeset by using the following command in your terminal:

pnpm changeset

Follow the on-screen prompts to complete the changeset process. This will create a new file containing the updated version and related descriptions.

For a detailed explanation on how to handle changeset updates or how this file is used please look at the Profit Decoder Documentation linked in Additional resources.

Step 5 - Commit and push the changes on your branch

Once all changes have been finalized and a changeset file has been created, go ahead and push your remote branch to the Github repository. Make sure that you are not pushing any changes to the master branch.

Step 6 - On the Github site, create a merge request and await all tests

After pushing all changes from your local device to the remote repository, navigate to your newly updated branch from https://github.com/Profit-Decoder/profitdecoder-webapp and start a merge request. Wait for all tests to complete and then finish the merge.

Step 7 - Wait for Github actions to complete and then merge the automatically generated pull request

Once the changes from your branch have been merged into the master branch, wait for Github actions to automatically create a new pull request via Changesets. Once this new pull request is available, go ahead and merge it with the master branch.

This will update the versioning on Github as well as update the contents of the Profit Decoder package on NPM with the new files and versioning.

Step 8 - Profit (Decoder)!

The changes can now be used for the staging and production Profit Decoder sites! For instructions on the next steps and how to handle the package, please see the Profit Decoder Documentation linked in Additional resources.

Additional resources

Please check out the Profit Decoder Documentation for more detailed documentation on everything you need to know for developing and maintaining the Profit Decoder App.

Credits to Finsweet for their detailed template which allowed us to get this repository up and running. Please check out their documentation for additional features that were not discussed here.