covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
94 lines (92 loc) • 5.64 kB
HTML
<div class="neo-header-text-container">
<span class="neo-header-text">Guide: the create-app script in detail</span>
</div>
<article>
<p>Inside the package.json you will find the script "create-app", which is a very good starting point for creating
your first neo.mjs app. You can run it inside the root folder of the neo.mjs repository like this:</p>
<pre><code>npm run create-app</code></pre>
<p>We would like to shed some light on the internals of this process to show you how to:</p>
<ol>
<li>Create an app using the script</li>
<li>Change the name of your app</li>
<li>Change the theme(s) of your app</li>
<li>Create an app manually</li>
<li>Remove an app you no longer need</li>
<li>Enhancing the script (feature request)</li>
</ol>
<h3><b style="color:red;">1)</b> After running the script, you will get asked to enter the name of your app (defaults to MyApp)</h3>
<img src="./resources/images/tutorials/create-app-choose-name.png">
<p>Afterwards you will get asked if you want to use the neo-theme-dark, neo-theme-light or both:</p>
<img src="./resources/images/tutorials/create-app-choose-theme.png">
<p>This is pretty much it. You will see a new folder under neo/apps with the lowercase version of your app name.<br/>
Hint: We recommend to stick to alphabetic characters for your app name.</p>
<img src="./resources/images/tutorials/create-app-files.png">
<p>You can see the code of the script in <a href="https://github.com/neomjs/neo/blob/dev/buildScripts/createApp.js">neo/buildScripts/createApp.js</a></p>
<p>The script will check, if neo/buildScripts/webpack/development/json/myApps.json exists.<br/>
The same will happen for neo/buildScripts/webpack/production/ (sticking to dev from here on, it is 1:1 for prod)</p>
<p>In case the file does not exist, neo/buildScripts/webpack/development/json/myApps.template.json will get consumed to generate it.</p>
<pre><code>{
"bodyTag": "<body>",
"buildFolder": "../../../dist/development",
"environment": "development",
"mainInput": "./src/Main.mjs",
"mainOutput": "main.js",
"workers": {
"data": {
"input": "./src/worker/Data.mjs",
"output": "dataworker.js"
},
"vdom": {
"input": "./src/worker/VDom.mjs",
"output": "vdomworker.js"
}
},
"apps": {
"RealWorld": {
"input": "myApps/RealWorld.mjs",
"output": "/apps/realworld/",
"title": "RealWorld"
}
}
}</code></pre>
<p>At this point, the RealWorld demo app is already included here to give you an example of how to create an neo.mjs app.
The docs app is a neo.mjs app as well (and probably the better starting point.</p>
<p>The .../json/myApps.json files as well as the content inside the neo/apps folder is added to the .gitignore.</p>
<p>To generate the index.html file for your app, neo/buildScripts/webpack/index.ejs will get consumed.<br/>
We have an open ticket to enhance this file: <a href="https://github.com/neomjs/neo/issues/134">#134</a>,
please let us know in case this is important for you!</p>
<h3><b style="color:red;">2)</b> Change the name of your app</h3>
<ol>
<li>Change the keys inside the .../json/myApps.json files (inside the apps object)</li>
<li>Rename the app folder to the lowercase version of your new app name</li>
<li>Open the app.mjs file inside your app folder and adjust the appPath & name</li>
<li>Open the index.html file inside your app folder and adjust the appPath</li>
<li>Open the MainContainer.mjs file inside your app folder and adjust the className</li>
<li>Although this process feels like an edge-case, it could get automated with a new script.<br/>
Feel free to open a feature request ticket in case this feels important for you!</li>
</ol>
<h3><b style="color:red;">3)</b> Change the theme(s) of your app</h3>
<p>Open the index.html file inside your app folder and adjust the Neo.config => themes</p>
<ol>
<li>The default value is themes: ['neo-theme-light', 'neo-theme-dark'], so not using the config includes both themes</li>
<li>themes: ['neo-theme-dark'] => include only the dark theme</li>
<li>themes: ['neo-theme-light'] => include only the light theme</li>
<li>themes: ['neo-theme-dark', 'neo-theme-light'] => include both themes and use the dark theme as the default one.</li>
</ol>
<h3><b style="color:red;">4)</b> Create an app manually</h3>
<p>This process is similar to changing the app name.</p>
<ol>
<li>Copy an existing app folder into neo/apps and use the new lowercase app name as the folder name</li>
<li>Follow the steps in <span style="color:red;">3)</span></li>
<li>Add your new app into the .../json/myApps.json files</li>
</ol>
<h3><b style="color:red;">5)</b> Remove an app you no longer need</h3>
<ol>
<li>Delete your app folder inside neo/apps</li>
<li>Remove the entries inside the .../json/myApps.json files.<br/>
In case this was your only app, you can delete the the .../json/myApps.json files instead.</li>
</ol>
<h3><b style="color:red;">6)</b> Enhancing the script (feature request)</h3>
<p>We do have an open feature request ticket for creating an npx script, which would allow to create neo apps
outside the neo repository root folder. Please take a look at: <a href="https://github.com/neomjs/neo/issues/90">#90</a></p>
</article>