cityzen-docs/npm-install.html at master · codeforlansing/cityzen-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="CityZen volunteer software documentation">
    <meta name="author" content="Rick Mason">
    <title>CityZen documentation</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/dashboard/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <!-- Dashboard.css -->
    <link rel="stylesheet" href="./Media/dashboard.css">


    <!-- Favicons -->
    <!-- Need to create Cityzen favicons - Olde English C perhaps? -->

<link rel="apple-touch-icon" href="./Media/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="./Media/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="./Media/favicons/favicon-16x16.png" sizes="16x16" type="image/png">

<link rel="icon" href="http://127.0.0.1:4000/Media/favicons/android-chrome-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="./Media/favicons/android-chrome-512x512.png" sizes="512x512" type="image/png">
<link rel="icon" href="http://127.0.0.1:4000/Media/favicons/mstile-150x150.png">
<link rel="manifest" href="./Media/favicons/site.webmanifest.json">

<link rel="mask-icon" href="/docs/4.4/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">

<link rel="icon" href="./media/favicons/favicon.ico">
<meta name="msapplication-config" content="http://127.0.0.1:4000/Media/favicons/browserconfig.xml">

<meta name="theme-color" content="#563d7c">

  </head>
  <body>

    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="index.html">CityZen</a>
    </nav>

<div class="container-fluid"> <!-- Begin left hand menu -->
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="index.html">
              <span data-feather="home"></span>
              Introduction <span class="sr-only">(current)</span>
            </a>
          </li>
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Setup</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Setup">
              <span data-feather="plus-circle"></span>
            </a>
          </h6>
          <li class="nav-item">
            <a class="nav-link" href="setting-up-trello.html">
              <span data-feather="setup-trello"></span>
              Setting up Trello
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="setting-up-cityzen.html">
              <span data-feather="setup-citiyzen"></span>
              Setting up CityZen
            </a>
          </li>
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Developers</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Meta">
              <span data-feather="plus-circle"></span>
            </a>
          </h6>
          <li class="nav-item">
            <a class="nav-link" href="npm-install.html">
              <span data-feather="npm install"></span>
              NPM Install
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="GitHub-install.html">
              <span data-feather="GitHub install"></span>
              GitHub Install
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Docker-install.html">
              <span data-feather="Docker install"></span>
              Docker Install
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="Link-Trello.html">
              <span data-feather="Link Trello"></span>
              Link Trello
            </a>
          </li>
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Meta</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Meta">
              <span data-feather="plus-circle"></span>
            </a>
          </h6>
          <li class="nav-item">
            <a class="nav-link" href="meet-the-team.html">
              <span data-feather="meet-the-team"></span>
              Meet the team
            </a>
          </li>

        </ul>


      </div>
    </nav> <!-- End left hand menu -->

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">NPM Install</h1>
      </div>

      <div class="col-md-9 text-justify align-top"> <!-- Main body of text -->
        The CityZen client is built using Vue.js.  The server backend is Node.js with a SQL Lite database.

        <p><strong>Tip</strong> CityZen requires a fairly recent version of both npm and Node.js.  To install both go here:
        <a href="https://www.npmjs.com/get-npm" target="_blank">Get NPM</a> <br/>
        For reference when these docs were written we were using version 12.18.1 of Node.js and version 6.14.5 of npm</p>
        <p></p>
        <h4>Installing the CityZen Server</h4>
        <p>
          The CityZen-Server project page on npm: <a href="https://www.npmjs.com/package/@codeforlansing/cityzen-server" target="_blank">CityZen-Server</a>

          <p>To install CityZen first create the directory cityzen-server.</p>

          <p class="bg-dark text-white w-50"><strong>md CityZen-Server</strong></p>


          <p>Then open a command prompt, navigate to the directory CityZen-Server and type npm init.</p>

          <p class="bg-dark text-white w-50"><strong>npm init</strong></p>

          <p>Then you have to answer a series of questions about the project.  Next to install the server you want type on the command line:</p>

          <p class="bg-dark text-white w-50"><strong>npm i @codeforlansing/cityzen-server</strong></p>
          <p>Or alternately you can install using npx:</p>
          <p class="bg-dark text-white w-50"><strong>npx @codeforlansing/cityzen-server</strong></p>

        </p>

        <h4>Installing the CityZen client</h4>

        <p>The CityZen-Client project page on npm: <a href="https://www.npmjs.com/package/@codeforlansing/cityzen-client-vue" target="_blank">CityZen-Client</a></p>

        <p>
            Once you have setup the CityZen Server you also need to create a Trello account.  For help linking the Trello account to the server
            visit the <a href="https://codeforlansing.github.io/cityzen-docs/Link-Trello.html" target="_blank">CityZen docs</a>.  It will walk you
            through getting the required information from Trello and create an env file for the CityZen server.
        </p>
        <p>
            Once you have the server running and linked to Trello you can install the client on your web server.  The client will install to
            port 8080.  There are two ways to install the client:
        </p>
        <p>First way is to simply download the client and associated files.  Two files are required <a href="./client-sample/client.html" target="_blank" download>Client.html</a>
           and <a href="./client-sample/sample-volunteer-tasks.css" target="_blank" download>sample-volunteer-tasks.css</a>
        </p>
        <p>Second way is to build the web page yourself and be sure to link to three CDN files in your pages head statement:

            <ul>
                <li><a href="https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/js/volunteer-tasks.js" target="_blank">https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/js/volunteer-tasks.js</a></li><br/>

                <li><a href="https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/js/volunteer-tasks.js.map" target="_blank">https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/js/volunteer-tasks.js.map</a></li><br/>

                <li><a href="https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/css/volunteer-tasks.css" target="_blank">https://cdn.jsdelivr.net/npm/@codeforlansing/cityzen-client-vue@latest/dist/css/volunteer-tasks.css</a></li>
            </ul>

        </p>

        <p><strong>TIP</strong> If you need a local development web server CityZen recommends <a href="https://www.npmjs.com/package/http-server">http-server</a></p>

        <div class="col-md-5 text-justify float-right">
            <a class="nav-link" href="GitHub-install.html">GitHub Install
              <svg class="bi bi-caret-right-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z"/>
              </svg>
            </a>
          </div>


        </main>


        </div>
    </body>


    </html>