You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Initial vue3 upgrade and upgrade of other dependencies
Switch to vite instead of webpack for build
remove mapzen geocoding search that no longer exists
Switch to cypress for testing
---------
Co-authored-by: vvi230714 <139596503+vvi230714@users.noreply.github.com>
Co-authored-by: pwolanin <107691+pwolanin@users.noreply.github.com>
Copy file name to clipboardExpand all lines: README.md
+22-19Lines changed: 22 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,22 +7,22 @@ These endorsements are determined by Ward Leaders, and have a huge influence ove
7
7
8
8
# Local development
9
9
10
-
This project currently requires outdated node and npm versions to build.
10
+
This project currently uses node version 20 to build.
11
11
12
-
Use Docker to start up a container that has working versions. The lines with ">"
12
+
You can use Docker to start up a container that has node 20 if you don't have it for local development. The lines with ">"
13
13
are in the native shell, the lines with ~ are in Docker.
14
14
15
15
```bash
16
16
# Build and start the Docker container.
17
-
> docker-compose build
18
-
> docker-compose up -d
19
-
> docker-compose exec ward-leaders bash
17
+
> dockercompose build
18
+
> dockercompose up -d
19
+
> dockercompose exec ward-leaders bash
20
20
21
21
# Install dependencies in the Docker container
22
22
~ npm ci
23
23
24
-
# In Docker, serve with hot reload at localhost:8080
25
-
~ npm start
24
+
# In Docker, serve at localhost:8080
25
+
~ npm run dev
26
26
27
27
# Inital load of the app in your browser is slow, fyi.
28
28
# The dev server has hot reload - you should see any
@@ -35,7 +35,7 @@ are in the native shell, the lines with ~ are in Docker.
35
35
# Exit docker and stop the container
36
36
~exit
37
37
38
-
> docker-compose down
38
+
> dockercompose down
39
39
```
40
40
41
41
# Technical overview
@@ -55,27 +55,27 @@ While this application runs in the browser, completely client-side, [Node.js](ht
55
55
**Contentful**
56
56
Poking around [their website](https://www.contentful.com/) may be enough, but it would be helpful to create a free account and poke around to make sure you understand the concept of a CMS-as-a-Service.
57
57
58
-
**Webpack**
59
-
[Webpack](https://webpack.js.org/) is a tool that aids you in pulling your hair out, building up frustration, and considering leaving front-end development behind for good. You can also use it to combine JavaScript modules into a bundled file that can be run in the browser. In this project it’s also used to run a local development server. Webpack can do *a ton* of things, and one of the trade-offs is that it’s rather confusing to configure and debug.
58
+
**Vite**
59
+
[Vite](https://vite.dev/guide/) Is used to build and combine JavaScript modules into a bundled file that can be run in the browser. In this project it’s also used to run a local development serverand the server for e2e tests.
60
60
61
61
**Modern JavaScript features**
62
62
This application is written in modern JavaScript (ES2015-ES2017) with language features such as [arrow functions](https://github.com/DrkSephy/es6-cheatsheet#arrow-functions), [destructuring](https://github.com/DrkSephy/es6-cheatsheet#destructuring), [object spread operator](https://codeburst.io/master-javascripts-object-spread-operator-3803430e99aa), and [async/await](http://nikgrozev.com/2017/10/01/async-await/).
63
63
64
-
**Babel**
65
-
[Babel](https://babeljs.io/) allows us to support older browsers by transpiling our modern source code into source code that is more widely supported.
66
-
67
64
**Vue.js**
68
-
We chose this framework because it’s relatively easy to get up-to-speed in, even if you’ve never used a JS framework before. But there are probably a few Vue.js-only things you’ll find yourself scratching your head about if it’s your first Vue.js app. It would be worth reading through their [really great guide](https://vuejs.org/v2/guide/).
65
+
We chose this framework because it’s relatively easy to get up-to-speed in, even if you’ve never used a JS framework before. But there are probably a few Vue.js-only things you’ll find yourself scratching your head about if it’s your first Vue.js app. It would be worth reading through their [really great guide](https://vuejs.org/guide/introduction.html). This project was initially developed with Vue 2 and later upgraded to Vue 3. It uses the Options API.
69
66
70
67
**Composing components**
71
68
This is a concept that you’ll already know if you’ve used React, Angular, choo, or other modern JS frameworks. If not, you’ll come across it [in the Vue.js guide](https://vuejs.org/v2/guide/#Composing-with-Components). [React’s docs](https://reactjs.org/docs/thinking-in-react.html) are also helpful for the concept.
72
69
73
70
**Vuex**
74
-
We use Vue.js’ official centralized state management library, vuex. If you’re familiar with flux, redux, or elm, this will be pretty recognizable. If it’s your first time with centralized state management, this may be the most complex concept. Read over the [vuex docs](https://vuex.vuejs.org/en/) — specifically “What is vuex?”
71
+
We use Vue.js’ centralized state management library, vuex. If you’re familiar with flux, redux, or elm, this will be pretty recognizable. If it’s your first time with centralized state management, this may be the most complex concept. Read over the [vuex docs](https://vuex.vuejs.org/en/) — specifically “What is vuex?”
75
72
76
73
**Vue-router**
77
74
If you’ve used a router before, whether in JS or a server-side environment, this should seem pretty familiar. But it will be helpful to have the [vue-router docs](https://router.vuejs.org/en/) handy for anything that’s not obvious.
78
75
76
+
**Testing**
77
+
[Cypress](https://www.cypress.io/) Only the Cypress component and e2e tests are currently being utilized. The tests are run automatically using github actions, but also can be run locally with npm.
78
+
79
79
## Directory structure
80
80
```
81
81
.
@@ -84,10 +84,11 @@ If you’ve used a router before, whether in JS or a server-side environment, th
84
84
├── README.md
85
85
├── data-scripts
86
86
├── package.json
87
+
├── index.html
87
88
├── public
88
89
│ ├── data
89
90
│ ├── CNAME
90
-
│ ├── index.html
91
+
│ ├── 404.html
91
92
├── src
92
93
│ ├── App.vue
93
94
│ ├── api
@@ -103,14 +104,16 @@ If you’ve used a router before, whether in JS or a server-side environment, th
|`public`| The directory that gets deployed. It includes the static `index.html` in source control, but the `build` script will put additional (compiled) files into this directory. |
115
+
| `index.html` | Vite uses this as the basis for serving the site. Inline JS code works together with code in 404.html to made this work as a single page app on github pages.
116
+
|`public`| Static assests that are copied to the build to be deployed. The `build` script will put additional (compiled) files together with these files and `index.html` in a `build/` directory. |
114
117
|`public/data`| Static data files that are requested dynamically by the application (at runtime). |
115
118
|`main.js`| Primary entry point for the app. Initializes router, store, and the top-level Vue component, mounting it to the `#app` element in `index.html`. |
116
119
|`App.vue`| Top-level Vue component. Provides the layout for the site, including the nav bar, loading indicator, and space for the current route’s view. Also sets up the site’s core styles. |
0 commit comments