forked from nullstack/nullstack.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgetting-started.html
More file actions
128 lines (125 loc) · 24.8 KB
/
getting-started.html
File metadata and controls
128 lines (125 loc) · 24.8 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Created with Nullstack - https://nullstack.app" />
<title>Getting Started - Nullstack</title>
<meta property="og:image" content="https://nullstack.app/image-1200x630.png">
<meta property="og:description" content="Create full-stack javascript applications within seconds">
<meta name="description" content="Create full-stack javascript applications within seconds">
<meta property="og:title" content="Getting Started - Nullstack">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Nullstack">
<meta property="og:url" content="https://nullstack.app/getting-started">
<link rel="canonical" href="https://nullstack.app/getting-started">
<link rel="shortcut icon" href="/favicon-96x96.png" type="image/png">
<link rel="icon" href="/favicon-96x96.png" type="image/png">
<link rel="manifest" href="/manifest-9cdb5778f42a90a83e1427c9316c97d3.json" integrity="sha512-dZgijzedfi73kz1kWm59C1cCtmMc4h1r1cC/8LGrn8niVN5QOpk6VM3id275XMzw8LrPIohK8bk3c6V070nTMQ==">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Nullstack">
<meta name="apple-mobile-web-app-title" content="Nullstack">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/client-9cdb5778f42a90a83e1427c9316c97d3.css" integrity="sha512-vAsFDGKdbOGUQaOLYLKiX8r3HWxKUnFNQey2a+9WANJhm1gKi2IrFswhS7QmzjtA8i9eMqiCe495kTyh3Jpnfg==" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png">
<meta name="msapplication-TileColor" content="#2d3748">
<link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="preload" href="/roboto-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin/><link rel="preload" href="/roboto-v20-latin-500.woff2" as="font" type="font/woff2" crossorigin/><link rel="preload" href="/crete-round-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin/>
</head>
<body>
<div id="application"><main class="light bgm1 cm3"><header class="x12 pftl bgm1 bs2"><div class="x xsb yy p5y"><div class="sm-x12 sm-xsb sm-p4x yy"><a title="Nullstack" href="/"><svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 511.5039 113.7368"><title> Nullstack <!--#--></title><path d="M13.2736,39.964H28.7009v9.8922a20.3919,20.3919,0,0,1,7.743-8.479,21.2792,21.2792,0,0,1,11.2172-3.0031q7.36,0,11.3349,4.1218t3.9745,11.6588a48.9655,48.9655,0,0,1-1.06,8.8913l-8.3025,42.8665H36.3556L44.187,65.7546a31.2306,31.2306,0,0,0,.5888-5.5939q0-7.6542-6.3593-7.6547a10.7348,10.7348,0,0,0-8.4791,4.3278q-3.5922,4.328-5.0639,12.0415l-7.1248,37.0372H.4961Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M81.4691,107.62q-7.2426,0-11.2466-4.1807t-4.004-11.8943a46.3965,46.3965,0,0,1,1.001-8.6557L75.64,39.964H92.7746L85.0609,80.24a29.8175,29.8175,0,0,0-.5888,5.5938q0,7.6551,6.4771,7.6548A10.3547,10.3547,0,0,0,99.2811,89.19q3.4446-4.2978,4.9756-12.0709L111.44,39.964h17.1348l-12.7775,65.9485H100.37V96.138a18.7565,18.7565,0,0,1-7.4781,8.3908A21.4849,21.4849,0,0,1,81.4691,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M150.2958,113.7368q-11.4821,0-16.7815-3.3563t-5.2995-10.5989a43.049,43.049,0,0,1,1.1188-8.3613l11.9532-56.6451H123.2687l2.532-13.2486h35.2118L146.2918,92.4213q-.1767.825-.3238,1.7371a10.5763,10.5763,0,0,0-.1473,1.6781q0,4.6521,8.2436,4.6517h16.3694l-2.65,13.2486Z" transform="translate(-0.4961)" fill="#d22365"></path><path d="M181.897,92.21q-11.4822,0-16.7816-3.3563T159.816,78.255a43.0455,43.0455,0,0,1,1.1187-8.3613l11.9532-56.6451H154.87L157.4018,0h35.2118L177.8929,70.8947q-.1765.8248-.3238,1.737a10.5766,10.5766,0,0,0-.1472,1.6782q0,4.6519,8.2435,4.6517h16.3694l-2.65,13.2486Z" transform="translate(-0.4961)" fill="#d22365"></path><path d="M228.3106,107.62a72.47,72.47,0,0,1-23.6119-4.1218l3.003-15.0739q10.5988,6.7717,21.6688,6.7715,6.4176,0,10.0983-2.2965a7.1387,7.1387,0,0,0,3.68-6.3593,4.4873,4.4873,0,0,0-1.8253-3.8273q-2.3556-1.884-9.5979-3.9452l-5.1817-1.4132q-13.8969-3.8271-13.8963-16.9582a18.9819,18.9819,0,0,1,8.0375-16.0455q8.0374-5.976,22.4637-5.9766a60.6829,60.6829,0,0,1,10.1573.8538,63.0434,63.0434,0,0,1,10.5105,2.797L260.8727,56.981a33.7,33.7,0,0,0-19.3724-6.3q-5.9478,0-9.3623,2.09a6.2659,6.2659,0,0,0-3.4152,5.5056,5.102,5.102,0,0,0,2.2375,4.2984q2.4731,1.7082,9.6568,3.7685l4.3573,1.2365q7.4775,2.12,10.9816,6.271t3.5035,10.805q0,10.7172-8.2436,16.84T228.3106,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M297.9546,106.2069q-11.3055,0-16.6932-3.3857t-5.3878-10.57a47.7847,47.7847,0,0,1,1.06-8.3613l5.9472-30.6778H265.9813l2.532-13.2486h16.8993l3.5918-18.7247h17.2527L302.6063,39.964h22.5521l-2.532,13.2486h-22.552l-6.1827,31.6788A20.2915,20.2915,0,0,0,293.48,88.13a3.9534,3.9534,0,0,0,1.9431,3.68q1.9433,1.1482,6.2416,1.1482h13.2486l-2.532,13.2486Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M338.2138,107.62q-9.4224,0-14.6029-5.1228-5.1828-5.1228-5.1816-14.25,0-12.2469,9.3034-18.99t26.2617-6.7421h11.3643l.4711-2.8852a3.6427,3.6427,0,0,1,.1177-.7066v-1.001A5.6271,5.6271,0,0,0,362.974,52.8q-2.9748-1.7666-8.5086-1.7665a41.5275,41.5275,0,0,0-10.8933,1.59,85.9338,85.9338,0,0,0-13.3074,5.0639l2.7675-14.7206a74.3941,74.3941,0,0,1,24.6129-4.5929q12.07,0,18.6363,4.6518,6.5643,4.652,6.5655,13.72a36.323,36.323,0,0,1-.4711,5.5939q-.4716,3.003-1.1188,5.9471l-7.2425,37.626H358.47v-7.36A26.3115,26.3115,0,0,1,338.2138,107.62Zm7.1837-11.8354q6.476,0,11.2466-5.6822t6.3-15.3978h-6.6537q-19.9029,0-19.9023,12.13a8.3352,8.3352,0,0,0,9.009,8.95Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M415.1828,107.62q-13.72,0-21.1683-7.4192t-7.4486-21.4333a42.63,42.63,0,0,1,5.005-20.8444,36.7663,36.7663,0,0,1,13.9257-14.338,40.3978,40.3978,0,0,1,20.7562-5.2111A39.0215,39.0215,0,0,1,445.8607,43.32l-3.1208,15.78a22.7112,22.7112,0,0,0-16.075-6.7126,21.2393,21.2393,0,0,0-11.8059,3.2974A22.52,22.52,0,0,0,406.88,64.783a29.416,29.416,0,0,0-2.8853,13.278q0,8.0083,3.4741,11.7765T417.95,93.606q8.8324,0,19.3724-6.1238l-3.2974,16.2516A45.998,45.998,0,0,1,415.1828,107.62Z" transform="translate(-0.4961)" fill="#2d3748"></path><path d="M458.1224,14.2911H475.375l-8.95,46.0463L490.2134,39.964H512L482.2643,64.5769l18.43,41.3356H482.382L469.31,75.058l-6.83,5.6527-4.8284,25.2018H440.3987Z" transform="translate(-0.4961)" fill="#2d3748"></path></svg></a><span class="yy md+off"><svg height="20" class="cm3" viewBox="0 0 512 512"><!----><!----><rect x="10" y="10" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="10" y="411.5957" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="10" y="210.7979" width="492" height="90.4043" rx="17.383" stroke-width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg></span></div><nav class="menu-links yy sm-p4 sm-off"><a href="/documentation" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Documentation<!--#--> <!--#--></a><a href="/components" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Components<!--#--> <!--#--></a><a href="/contributors" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Contributors<!--#--> <!--#--></a><a href="https://github.com/nullstack/nullstack" target="_blank" rel="noopener" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Source<!--#--> <!--#--></a><a href="/pt-br" class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Português<!--#--> <!--#--></a><button class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"> <!--#-->Night Mode<!--#--> <!--#--></button></nav><div class="sm-x12 sm-p4x sm-off"><a href="/getting-started" class="xx sm-x12 bci1 bgi1 bgm1:h cm1 ci1:h p4x p2y">Get Started<!--#--></a></div></div></header><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><section class="x sm-p4x sm-p10y md+p20y"><h1 class="x12 sm-fs6 md+fs8 m6b"> <!--#-->Getting Started<!--#--> <!--#--></h1><article><blockquote>
<p>📌 You can watch a video tutorial on our <a href="https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId" target="_blank" rel="noopener">Youtube Channel</a>.</p>
</blockquote>
<p>Create full-stack javascript applications within seconds using <code>npx</code> to generate your project files from the latest template.</p>
<blockquote>
<p>🔥 The minimum required <a href="https://nodejs.org" target="_blank" rel="noopener">node.js</a> version for development mode is <em>12.12.0</em>.</p>
</blockquote>
<blockquote>
<p>⚠ If the directory you are in contains spaces, you use Windows and <code>npx</code> gives errors, read about <a href="#the-known-npx-bug" target="_blank" rel="noopener">the known npx bug</a>.</p>
</blockquote>
<p>Replace <code>project-name</code> with your project name and run the command below to start a project:</p>
<pre><code class="language-sh">npx create<span class="token operator">-</span>nullstack<span class="token operator">-</span>app project<span class="token operator">-</span>name
</code></pre>
<p>Change directory to the generated folder:</p>
<pre><code class="language-sh">cd project<span class="token operator">-</span>name
</code></pre>
<p>Install the dependencies:</p>
<pre><code class="language-sh">npm install
</code></pre>
<p>Start the application in development mode:</p>
<pre><code class="language-sh">npm start
</code></pre>
<h2 id="understanding-the-generated-files"><a href="#understanding-the-generated-files">Understanding the generated files</a></h2><p>The following folders and files will be generated:</p>
<h3 id="index-js"><a href="#index-js">index.js</a></h3><p>This is the <a href="https://webpack.js.org" target="_blank" rel="noopener">Webpack</a> entry point.</p>
<p>Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.</p>
<h3 id="src-"><a href="#src-">src/</a></h3><p>This folder will contain the actual source code of your application.</p>
<h3 id="src-application-njs"><a href="#src-application-njs">src/Application.njs</a></h3><p>This is your application main file.</p>
<blockquote>
<p>✨ Learn more about the <a href="/njs-file-extension" title="Nullstack Javascript">njs file extension</a>.</p>
</blockquote>
<p>The <code>start</code> function will be automatically called once when you run <code>npm start</code>, use it to populate your server <a href="/context">context</a> with things like <a href="/how-to-use-mongodb-with-nullstack">database</a>, <a href="/context-settings">settings</a>, and <a href="/context-secrets">secrets</a>.</p>
<blockquote>
<p>✨ Learn more about the <a href="/application-startup">application startup</a>.</p>
</blockquote>
<h3 id="src-application-scss"><a href="#src-application-scss">src/Application.scss</a></h3><p>This is an empty file just to demonstrate that you can use <a href="/styles">SCSS with Nullstack</a>.</p>
<p>It is a good practice to import a style file in a component with the same name.</p>
<blockquote>
<p>✨ Learn more about <a href="/styles">styles</a>.</p>
</blockquote>
<h3 id="public-"><a href="#public-">public/</a></h3><p>Every file in here will be available to anyone from the domain root.</p>
<p>By default <code>create-nullstack-app</code> generates the icons required for your <strong>manifest.json</strong> and images for OG meta tags.</p>
<blockquote>
<p>✨ Learn more about <a href="/context-project">manifest.json</a>.</p>
</blockquote>
<p>Be sure to replace these images with your project identity.</p>
<h3 id="-development-"><a href="#-development-">.development/</a></h3><p>This is the compiled result of your application in development mode.</p>
<blockquote>
<p>🔥 Do not touch this folder</p>
</blockquote>
<h3 id="-production-"><a href="#-production-">.production/</a></h3><p>This is the compiled result of your application in production mode.</p>
<blockquote>
<p>🔥 Do not touch this folder</p>
</blockquote>
<blockquote>
<p>✨ Learn more about <a href="/how-to-deploy-a-nullstack-application">how to deploy a Nullstack application</a>.</p>
</blockquote>
<h2 id="the-known-npx-bug"><a href="#the-known-npx-bug">The known npx bug</a></h2><p>Warned on <code>npx</code> issues like <a href="https://github.com/zkat/npx/issues/100" target="_blank" rel="noopener">#100</a>, <a href="https://github.com/zkat/npx/issues/110" target="_blank" rel="noopener">#110</a> and <a href="https://github.com/zkat/npx/issues/146" target="_blank" rel="noopener">#143</a>, it has an error when trying to resolve the path to his cache folder when contains spaces.</p>
<p>If this happens to you, our recommendations are:</p>
<ul>
<li><p>Using downloaded as you normally would with <code>npm</code>:</p>
<pre><code class="language-sh">npm i <span class="token operator">-</span>g create<span class="token operator">-</span>nullstack<span class="token operator">-</span>app
create<span class="token operator">-</span>nullstack<span class="token operator">-</span>app project<span class="token operator">-</span>name
</code></pre></li>
<li><p>or, change the cache folder directory, as stated <a href="https://github.com/zkat/npx/issues/146#issuecomment-384016791" target="_blank" rel="noopener">here</a> and <a href="https://github.com/zkat/npx/issues/146#issuecomment-384019497" target="_blank" rel="noopener">here</a>:</p>
<ul>
<li>If you want to keep the use of space, replace <code>FirstName</code> with the one used on your path and run:</li>
</ul>
<pre><code class="language-sh">npm config <span class="token keyword">set</span> cache <span class="token string">"C:\Users\FirstName~1\AppData\Roaming\npm-cache"</span> <span class="token operator">--</span>global
</code></pre>
<ul>
<li>or, using another path without spaces:</li>
</ul>
<pre><code class="language-sh">npm config <span class="token keyword">set</span> cache <span class="token constant">C</span><span class="token operator">:</span>\tmp\nodejs\npm<span class="token operator">-</span>cache <span class="token operator">--</span>global
</code></pre></li>
</ul>
<h2 id="next-step"><a href="#next-step">Next step</a></h2><p>⚔ Create your first <a href="/renderable-components">renderable component</a>.</p>
</article></section><!-- --><!-- --><!----><footer class="xx m20t"><div class="x xr md+bcm2t yy md+p10y prtl"><a href="/waifu"><img src="/nullachan.png" alt="Nulla-Chan" title="Nulla-Chan: Nullstack's official waifu" class="pabl sm-p2l" height="160" loading="lazy"/></a><nav class="xr sm-x4 yy"><a href="https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">YouTube<!--#--></a><a href="https://twitter.com/nullstackapp" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">Twitter<!--#--></a><a href="https://github.com/nullstack" rel="noopener" target="_blank" class="sm-xr sm-m1y sm-x12 md+bci1 sm-bcm2t sm-p4t ci1 md+cm1:h md+bgi1:h p4x p2y md+m2x">GitHub<!--#--></a></nav></div></footer></main></div>
<script async>
window.page = {"image":"/image-1200x630.png","status":200,"title":"Getting Started - Nullstack","description":"Create full-stack javascript applications within seconds"};
window.instances = {"application":{},"n-0-0-0":{"expanded":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"Documentation","href":"/documentation"},{"title":"Components","href":"/components"},{"title":"Contributors","href":"/contributors"},{"title":"Source","href":"https://github.com/nullstack/nullstack","target":"_blank"},{"title":"Português","href":"/pt-br"}],"action":{"title":"Get Started","href":"/getting-started"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"n-0-0-0-0-0-0-1-0":{},"n-0-0-12":{"title":"Getting Started","html":"<blockquote>\n<p>📌 You can watch a video tutorial on our <a href=\"https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId\" target=\"_blank\" rel=\"noopener\">Youtube Channel</a>.</p>\n</blockquote>\n<p>Create full-stack javascript applications within seconds using <code>npx</code> to generate your project files from the latest template.</p>\n<blockquote>\n<p>🔥 The minimum required <a href=\"https://nodejs.org\" target=\"_blank\" rel=\"noopener\">node.js</a> version for development mode is <em>12.12.0</em>.</p>\n</blockquote>\n<blockquote>\n<p>⚠ If the directory you are in contains spaces, you use Windows and <code>npx</code> gives errors, read about <a href=\"#the-known-npx-bug\" target=\"_blank\" rel=\"noopener\">the known npx bug</a>.</p>\n</blockquote>\n<p>Replace <code>project-name</code> with your project name and run the command below to start a project:</p>\n<pre><code class=\"language-sh\">npx create<span class=\"token operator\">-</span>nullstack<span class=\"token operator\">-</span>app project<span class=\"token operator\">-</span>name\n</code></pre>\n<p>Change directory to the generated folder:</p>\n<pre><code class=\"language-sh\">cd project<span class=\"token operator\">-</span>name\n</code></pre>\n<p>Install the dependencies:</p>\n<pre><code class=\"language-sh\">npm install\n</code></pre>\n<p>Start the application in development mode:</p>\n<pre><code class=\"language-sh\">npm start\n</code></pre>\n<h2 id=\"understanding-the-generated-files\"><a href=\"#understanding-the-generated-files\">Understanding the generated files</a></h2><p>The following folders and files will be generated:</p>\n<h3 id=\"index-js\"><a href=\"#index-js\">index.js</a></h3><p>This is the <a href=\"https://webpack.js.org\" target=\"_blank\" rel=\"noopener\">Webpack</a> entry point.</p>\n<p>Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.</p>\n<h3 id=\"src-\"><a href=\"#src-\">src/</a></h3><p>This folder will contain the actual source code of your application.</p>\n<h3 id=\"src-application-njs\"><a href=\"#src-application-njs\">src/Application.njs</a></h3><p>This is your application main file.</p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/njs-file-extension\" title=\"Nullstack Javascript\">njs file extension</a>.</p>\n</blockquote>\n<p>The <code>start</code> function will be automatically called once when you run <code>npm start</code>, use it to populate your server <a href=\"/context\">context</a> with things like <a href=\"/how-to-use-mongodb-with-nullstack\">database</a>, <a href=\"/context-settings\">settings</a>, and <a href=\"/context-secrets\">secrets</a>.</p>\n<blockquote>\n<p>✨ Learn more about the <a href=\"/application-startup\">application startup</a>.</p>\n</blockquote>\n<h3 id=\"src-application-scss\"><a href=\"#src-application-scss\">src/Application.scss</a></h3><p>This is an empty file just to demonstrate that you can use <a href=\"/styles\">SCSS with Nullstack</a>.</p>\n<p>It is a good practice to import a style file in a component with the same name.</p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/styles\">styles</a>.</p>\n</blockquote>\n<h3 id=\"public-\"><a href=\"#public-\">public/</a></h3><p>Every file in here will be available to anyone from the domain root.</p>\n<p>By default <code>create-nullstack-app</code> generates the icons required for your <strong>manifest.json</strong> and images for OG meta tags.</p>\n<blockquote>\n<p>✨ Learn more about <a href=\"/context-project\">manifest.json</a>.</p>\n</blockquote>\n<p>Be sure to replace these images with your project identity.</p>\n<h3 id=\"-development-\"><a href=\"#-development-\">.development/</a></h3><p>This is the compiled result of your application in development mode.</p>\n<blockquote>\n<p>🔥 Do not touch this folder</p>\n</blockquote>\n<h3 id=\"-production-\"><a href=\"#-production-\">.production/</a></h3><p>This is the compiled result of your application in production mode.</p>\n<blockquote>\n<p>🔥 Do not touch this folder</p>\n</blockquote>\n<blockquote>\n<p>✨ Learn more about <a href=\"/how-to-deploy-a-nullstack-application\">how to deploy a Nullstack application</a>.</p>\n</blockquote>\n<h2 id=\"the-known-npx-bug\"><a href=\"#the-known-npx-bug\">The known npx bug</a></h2><p>Warned on <code>npx</code> issues like <a href=\"https://github.com/zkat/npx/issues/100\" target=\"_blank\" rel=\"noopener\">#100</a>, <a href=\"https://github.com/zkat/npx/issues/110\" target=\"_blank\" rel=\"noopener\">#110</a> and <a href=\"https://github.com/zkat/npx/issues/146\" target=\"_blank\" rel=\"noopener\">#143</a>, it has an error when trying to resolve the path to his cache folder when contains spaces.</p>\n<p>If this happens to you, our recommendations are:</p>\n<ul>\n<li><p>Using downloaded as you normally would with <code>npm</code>:</p>\n<pre><code class=\"language-sh\">npm i <span class=\"token operator\">-</span>g create<span class=\"token operator\">-</span>nullstack<span class=\"token operator\">-</span>app\ncreate<span class=\"token operator\">-</span>nullstack<span class=\"token operator\">-</span>app project<span class=\"token operator\">-</span>name\n</code></pre></li>\n<li><p>or, change the cache folder directory, as stated <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384016791\" target=\"_blank\" rel=\"noopener\">here</a> and <a href=\"https://github.com/zkat/npx/issues/146#issuecomment-384019497\" target=\"_blank\" rel=\"noopener\">here</a>:</p>\n<ul>\n<li>If you want to keep the use of space, replace <code>FirstName</code> with the one used on your path and run:</li>\n</ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set</span> cache <span class=\"token string\">\"C:\\Users\\FirstName~1\\AppData\\Roaming\\npm-cache\"</span> <span class=\"token operator\">--</span>global\n</code></pre>\n<ul>\n<li>or, using another path without spaces:</li>\n</ul>\n<pre><code class=\"language-sh\">npm config <span class=\"token keyword\">set</span> cache <span class=\"token constant\">C</span><span class=\"token operator\">:</span>\\tmp\\nodejs\\npm<span class=\"token operator\">-</span>cache <span class=\"token operator\">--</span>global\n</code></pre></li>\n</ul>\n<h2 id=\"next-step\"><a href=\"#next-step\">Next step</a></h2><p>⚔ Create your first <a href=\"/renderable-components\">renderable component</a>.</p>\n","description":"Create full-stack javascript applications within seconds"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}};
window.environment = {"client":false,"server":true,"development":false,"production":true,"static":true,"key":"9cdb5778f42a90a83e1427c9316c97d3"};
window.settings = {};
window.worker = {"enabled":true,"fetching":false,"preload":["/404","/about","/application-startup","/context-data","/context-environment","/context-page","/context-project","/context-secrets","/context-settings","/context","/full-stack-lifecycle","/getting-started","/how-to-deploy-a-nullstack-application","/how-to-use-facebook-pixel-with-nullstack","/how-to-use-google-analytics-with-nullstack","/how-to-use-mongodb-with-nullstack","/instance-self","/njs-file-extension","/renderable-components","/routes-and-params","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/stateful-components","/static-site-generation","/styles","/two-way-bindings","/documentation","/components","/about","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2","/nullachan.png"],"headers":{},"queues":{},"online":true,"responsive":true};
window.params = {"slug":"getting-started"};
window.project = {"type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","favicon":"/favicon-96x96.png","icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"disallow":[],"sitemap":true,"cdn":"","protocol":"https","name":"Nullstack","domain":"nullstack.app","color":"#d22365","backgroundColor":"#2d3748"};
window.context = {"mode":"light","oppositeMode":"dark"};
document.addEventListener('DOMContentLoaded', () => {
const script = window.document.createElement('script');
script.src = '/client-9cdb5778f42a90a83e1427c9316c97d3.js';
script.integrity = 'sha512-0uTc8acdgpOj0RrKj5FnYwXRpLXfqL4nWm0UipWJa7V9rarS5OyTT9S0p5UfMcWCCauR+1Jr68bzB5jKk/CKEA==';
script.crossOrigin = 'anonymous';
document.body.append(script);
});
</script>
</body>
</html>