Skip to content

Commit

Permalink
Merge pull request #25 from kwheelan/issue.24
Browse files Browse the repository at this point in the history
Setup webpack for development and production build
  • Loading branch information
kwheelan authored Jul 17, 2024
2 parents 7038bc8 + 6aa5966 commit 15da599
Show file tree
Hide file tree
Showing 69 changed files with 4,493 additions and 21 deletions.
29 changes: 28 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,29 @@
# Ignore all .xlsx files
# *.xlsx
# *.xlsx

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Bower dependency directory (https://bower.io/)
bower_components

# Dependency directories
node_modules/
jspm_packages/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test
26 changes: 26 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,29 @@
Still in development.

See deployment here: https://kwheelan.github.io/budget-request-demo/

## Contributing

This repo uses yarn for package management and webpack for a
development server and production bundler.

### Setup

Install Node.js (recommend using [nvm](https://github.com/nvm-sh/nvm)) and [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) if you don't have it already.

Install package dependencies:
```bash
yarn
```

Run the development server:
```bash
yarn start
```

### Creating a New Release

Run webpack bundler:
```bash
yarn build
```
1 change: 1 addition & 0 deletions build/bundle.js

Large diffs are not rendered by default.

File renamed without changes
1 change: 1 addition & 0 deletions build/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo Budget Form</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.4/dist/umd/popper.min.js" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script><script defer="defer" src="bundle.js"></script></head><body><header><img src="d027d45141f87dc014af.png" alt="City of Detroit Logo" id="logo"><h1>FY2026 Budget Form</h1><h2 id="subtitle"></h2></header><div id="main-panel"><div id="welcome-page"><button class="btn step" id="step-upload">1. Upload your Excel data</button> <button class="btn step" id="step-revenue">2. Baseline request</button> <button class="btn step" id="step-initiatives">3. Name any new initiatives</button> <button class="btn step" id="step-finish">4. Confirm and finish</button></div><div id="prompt-div"><h3 id="prompt"></h3><br><button class="btn" id="option1"></button> <button class="btn" id="option2"></button></div><div class="table-container"><table class="table table-bordered mt-3" id="main-table"><thead class="thead-dark"></thead><tbody></tbody></table></div><div class="row"><div id="add-btn-div"><button class="btn btn-add" id="add-btn"></button></div></div><div class="row"><div class="col-md-12"><div id="nav-btns"><button class="btn" id="btn-last"><strong>&lt;&lt; Previous</strong></button> <button class="btn" id="btn-next"><strong>Continue &gt;&gt;</strong></button></div></div></div></div><div id="sidebar-panel"><div class="sidebar-content"><br><h4 id="sidebar-title">Summary</h4><br><h6 id="section-header"><strong>Baseline</strong></h6><div id="baseline-stats"><div class="sidebar-stat-line" id="target"><span class="stat-label">FY26 target:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="baseline-revenue"><span class="stat-label">Projected revenue:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="baseline-personnel"><span class="stat-label">Personnel cost:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="baseline-nonpersonnel"><span class="stat-label">Non-personnel cost:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="baseline-total"><span class="stat-label">Total baseline:</span> <span class="stat"></span></div></div><br><h6 id="section-header"><strong>Supplemental</strong></h6><div id="supp-stats"><div class="sidebar-stat-line" id="supp-revenue"><span class="stat-label">Revenue:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="supp-personnel"><span class="stat-label">Personnel cost:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="supp-nonpersonnel"><span class="stat-label">Non-personnel cost:</span> <span class="stat"></span></div><div class="sidebar-stat-line" id="supp-total"><span class="stat-label">Total supplemental:</span> <span class="stat"></span></div></div></div></div><div class="modal fade" id="main-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modal-title"></h5><button type="button" id="modal-close-x" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body" id="modal-body"></div></div></div></div></body></html>
24 changes: 24 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "budget-request-form",
"description": "The City of Detroit's budget request form for Office of the Chief Financial Officer.",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
},
"license": "MIT",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.24.9",
"@babel/preset-env": "^7.24.8",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.2",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.9.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"style-loader": "^4.0.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
}
}
Binary file added src/assets/city-of-detroit-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
22 changes: 2 additions & 20 deletions index.html → src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,6 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/common.css">
<!-- Component CSS -->
<link rel="stylesheet" href="js/components/accordion/accordion.css">
<link rel="stylesheet" href="js/components/body/body.css">
<link rel="stylesheet" href="js/components/welcome/welcome.css">
<link rel="stylesheet" href="js/components/header/header.css">
<link rel="stylesheet" href="js/components/prompt/prompt.css">
<link rel="stylesheet" href="js/components/nav_buttons/nav_buttons.css">
<link rel="stylesheet" href="js/components/modal/modal.css">
<link rel="stylesheet" href="js/components/form/form.css">
<link rel="stylesheet" href="js/components/sidebar/sidebar.css">
<link rel="stylesheet" href="js/components/table/table.css">
<link rel="stylesheet" href="js/components/file_upload/file_upload.css">

<!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.4/dist/umd/popper.min.js" crossorigin="anonymous"></script>
Expand All @@ -32,9 +17,6 @@
<!-- JS excel library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>

<!-- My javascript entrypoint -->
<script src="js/init.js" type="module"></script>

</head>
<body>

Expand Down Expand Up @@ -105,10 +87,10 @@ <h3 id="prompt"></h3>
<div class="col-md-12">
<div id="nav-btns">
<button class="btn" id="btn-last">
<strong><< Previous</strong>
<strong>&lt;&lt; Previous</strong>
</button>
<button class="btn" id="btn-next">
<strong>Continue >></strong>
<strong>Continue &gt;&gt;</strong>
</button>
</div>
</div>
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './accordion.css';

import { Fund } from "../../utils/data_utils/local_storage_handlers.js";
import { formatCurrency } from "../../utils/common_utils.js";
import Table from "../table/table.js";
Expand Down
File renamed without changes.
2 changes: 2 additions & 0 deletions js/components/body/body.js → src/js/components/body/body.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './body.css';

import Welcome from '../../components/welcome/welcome.js'
import { Accordion } from '../accordion/accordion.js';
import { FileUpload } from '../file_upload/file_upload.js';
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './file_upload.css';

import { processWorkbook } from "../../utils/data_utils/XLSX_handlers.js";

export const FileUpload = {
Expand Down
File renamed without changes.
2 changes: 2 additions & 0 deletions js/components/form/form.js → src/js/components/form/form.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './form.css';

import Dropdown from "./subcomponents/dropdown.js";
import NewField from "./subcomponents/fields.js";
import SubmitButton from "./subcomponents/submit.js";
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './header.css';

import { CurrentFund } from "../../utils/data_utils/local_storage_handlers.js";

export const Subtitle = {
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './modal.css';

function clearModal(){
updateModalTitle('');
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './nav_buttons.css';

import { nextPage, lastPage } from '../../views/view_logic.js'

function initializeNavButtons(){
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './prompt.css';

import Text from "./subcomponents/text.js";
import Buttons from "./subcomponents/buttons.js";
Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './sidebar.css';

import { formatCurrency } from "../../utils/common_utils.js";
import { TARGET } from "../../init.js";
import { Baseline, Supplemental } from "../../utils/data_utils/local_storage_handlers.js";
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './table.css';

import Buttons from './subcomponents/buttons.js'
import Cell from './subcomponents/cells.js'
import Columns from './subcomponents/columns.js'
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './welcome.css';

// Hide and unhide welcome buttons
function unhideWelcomeButtons(){
document.getElementById("welcome-page").style.display = "block";
Expand Down
3 changes: 3 additions & 0 deletions js/init.js → src/js/init.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// import styles
import '../css/common.css';

// import functions
import { CurrentPage } from './utils/data_utils/local_storage_handlers.js';

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
79 changes: 79 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// Determine mode from the environment, default to development
const mode = process.env.NODE_ENV || 'development';
const isProduction = mode === 'production';

module.exports = {
// Entry point for the application
entry: './src/js/init.js',

// Output configuration for the bundle
output: {
filename: isProduction ? 'bundle.[contenthash].js' : 'bundle.js',
path: path.resolve(__dirname, 'build'),
},

// Use the mode variable to set the mode
mode,

// Enable source maps for development mode
devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',

// Module rules for processing different types of files
module: {
rules: [
{
test: /\.js$/, // Process any .js files
exclude: /node_modules/, // Exclude the node_modules directory
use: {
loader: 'babel-loader', // Use babel-loader to transpile ES6+ to ES5
},
},
{
test: /\.css$/, // Process any .css files
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader'
], // Use style-loader in development for hot reloading
},
{
test: /\.html$/, // Process any .html files
use: ['html-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},

// Plugins for additional functionality
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // Template file to use
}),
new MiniCssExtractPlugin({
filename: isProduction ? '[name].[contenthash].css' : '[name].css',
}),
],

// Configuration for the development server
devServer: {
hot: true, // Enable hot module replacement
open: true, // Open the browser after server had been started
port: 3000, // Set the port to listen on
},

// Optimization configuration, only configure minimizers if in production
optimization: isProduction ? {
minimizer: [
new TerserJSPlugin({}), // Minimize JavaScript
new OptimizeCSSAssetsPlugin({}), // Minimize CSS
],
} : {},
};
Loading

0 comments on commit 15da599

Please sign in to comment.