Web Budget JS

🚀 Quick start

1. Clone application.

   Use the GIT CLI to clone the application..

   git clone [email protected]:felixbec/web-budget-JS.git 

2. Before starting to develop.

   Navigate into your new site’s directory and start it up.

   cd web-budget-js/
   npm install

   At this point you have the repository download with all the dependencies installed, but if you try to start by running npm start you are going to receive these messages in the console:

   ERROR in Entry module not found: Error: Can't resolve './dist/bundle.js'.
   

   Due to Webpack Bundled Scripts not being setup.

3. Configure Webpack Bundled Scripts.

   Run the following command npm run dev. The CLI popup will remove the existing /dist/bundle.js and create new bundled scripts file with the latest changes.

4. Open the source code and start editing!

   Run the following command npm start.

   Your site is now running at https://localhost:8080!

   Open the web-budget-js directory in your code editor of choice and edit src/index.js. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the top-level files and directories you'll see.

.
├── dist
├── node_modules
├── src
├── .gitignore
├── back.png
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── style.css
└── webpack.config.js

1. /dist: This directory will contain all of the bundled code related to what you will see on the front-end of your application.

2. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

3. /src: This directory will contain all of the code related to what you will see on the front-end of your site.

4. .gitignore: This file tells git which files it should not track / not maintain a version history for.

5. back.png: This file contains the background image of the application.

6. index.html: This file contains the html of the entire application.

7. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

8. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

9. README.md: A text file containing useful reference information about your project.

10. style.css: This file contains the styles of the entire application.

11. webpack.config.js: This file contains all of your configuration, loaders, and other specific information relating to your build.