+{"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Article/0-0-0-18/application-startup":{"title":"Application Startup","html":"<p>The <strong>server.js<\\/strong>/<strong>client.js<\\/strong> files at your application root are responsible for starting your application.<\\/p>\n<p>When you run the application with <code>npm start<\\/code> the <code>Nullstack.start<\\/code> method in both files will start your main component and return the <a href=\"/context\"><code>context<\\/code><\\/a> object of their respectives environments.<\\/p>\n<p>The returned <code>context<\\/code> could be used normally, and you can set it's <code>start<\\/code> method which runs only once, being a good place for setting things up, as your database:<\\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\\/span> Nullstack <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'nullstack'<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token keyword\">import<\\/span> Application <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'./src/Application'<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token keyword\">import<\\/span> startDatabase <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'./database'<\\/span><span class=\"token punctuation\">;<\\/span>\n\n<span class=\"token keyword\">const<\\/span> context <span class=\"token operator\">=<\\/span> Nullstack<span class=\"token punctuation\">.<\\/span><span class=\"token function\">start<\\/span><span class=\"token punctuation\">(<\\/span>Application<span class=\"token punctuation\">)<\\/span><span class=\"token punctuation\">;<\\/span>\n\ncontext<span class=\"token punctuation\">.<\\/span><span class=\"token function-variable function\">start<\\/span> <span class=\"token operator\">=<\\/span> <span class=\"token keyword\">async<\\/span> <span class=\"token keyword\">function<\\/span><span class=\"token punctuation\">(<\\/span><span class=\"token punctuation\">)<\\/span> <span class=\"token punctuation\">{<\\/span>\n context<span class=\"token punctuation\">.<\\/span>database <span class=\"token operator\">=<\\/span> <span class=\"token keyword\">await<\\/span> <span class=\"token function\">startDatabase<\\/span><span class=\"token punctuation\">(<\\/span>context<span class=\"token punctuation\">.<\\/span>secrets<span class=\"token punctuation\">)<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token punctuation\">}<\\/span>\n\n<span class=\"token keyword\">export<\\/span> <span class=\"token keyword\">default<\\/span> context<span class=\"token punctuation\">;<\\/span>\n<\\/code><\\/pre>\n<blockquote>\n<p>💡 The <code>context.start<\\/code> in <strong>server.js<\\/strong> runs when the application is booted, and on <strong>client.js<\\/strong> once the browser loads it<\\/p>\n<\\/blockquote>\n<p>The <code>context<\\/code> can be updated in any way as long as it be exported on both files, when building the app Nullstack turns it into a serverless function out-of-box.<\\/p>\n<h2 id=\"dependency-startup-pattern\"><a href=\"#dependency-startup-pattern\">Dependency startup pattern<\\/a><\\/h2><p>A nice pattern to work with dependencies that require startup time configurations is to define a <code>_start<\\/code> function in the dependency:<\\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\\/span> Nullstack <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'nullstack'<\\/span><span class=\"token punctuation\">;<\\/span>\n\n<span class=\"token keyword\">class<\\/span> <span class=\"token class-name\">Dependency<\\/span> <span class=\"token keyword\">extends<\\/span> <span class=\"token class-name\">Nullstack<\\/span> <span class=\"token punctuation\">{<\\/span>\n\n <span class=\"token keyword\">static<\\/span> <span class=\"token keyword\">async<\\/span> <span class=\"token function\">_start<\\/span><span class=\"token punctuation\">(<\\/span><span class=\"token parameter\">context<\\/span><span class=\"token punctuation\">)<\\/span> <span class=\"token punctuation\">{<\\/span>\n <span class=\"token comment\">// start something with context<\\/span>\n <span class=\"token punctuation\">}<\\/span>\n\n<span class=\"token punctuation\">}<\\/span>\n\n<span class=\"token keyword\">export<\\/span> <span class=\"token keyword\">default<\\/span> Dependency<span class=\"token punctuation\">;<\\/span>\n<\\/code><\\/pre>\n<p>And call it in the <code>context.start<\\/code> passing the <a href=\"/context\">context<\\/a>:<\\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\\/span> Nullstack <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'nullstack'<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token keyword\">import<\\/span> Application <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'./src/Application'<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token keyword\">import<\\/span> Dependency <span class=\"token keyword\">from<\\/span> <span class=\"token string\">'./src/Dependency'<\\/span><span class=\"token punctuation\">;<\\/span>\n\n<span class=\"token keyword\">const<\\/span> context <span class=\"token operator\">=<\\/span> Nullstack<span class=\"token punctuation\">.<\\/span><span class=\"token function\">start<\\/span><span class=\"token punctuation\">(<\\/span>Application<span class=\"token punctuation\">)<\\/span><span class=\"token punctuation\">;<\\/span>\n\ncontext<span class=\"token punctuation\">.<\\/span><span class=\"token function-variable function\">start<\\/span> <span class=\"token operator\">=<\\/span> <span class=\"token keyword\">async<\\/span> <span class=\"token keyword\">function<\\/span><span class=\"token punctuation\">(<\\/span><span class=\"token punctuation\">)<\\/span> <span class=\"token punctuation\">{<\\/span>\n <span class=\"token keyword\">await<\\/span> Dependency<span class=\"token punctuation\">.<\\/span><span class=\"token function\">_start<\\/span><span class=\"token punctuation\">(<\\/span>context<span class=\"token punctuation\">)<\\/span><span class=\"token punctuation\">;<\\/span>\n<span class=\"token punctuation\">}<\\/span>\n\n<span class=\"token keyword\">export<\\/span> <span class=\"token keyword\">default<\\/span> Application<span class=\"token punctuation\">;<\\/span>\n<\\/code><\\/pre>\n<blockquote>\n<p>🔒 Server functions with the name starting with "_" do not generate an API endpoint to avoid malicious API calls.<\\/p>\n<\\/blockquote>\n","persistent":true,"locale":"en-US","i18n":{"lead":"Have any questions or suggestions?","cta":"Join our Discord","next":"Next Step","learn":"Learn more about"},"description":"The start function will run only once when your application loads and is a good place for setting up your context","action":"⚔ Learn about the [application startup](/application-startup).","topics":[{"title":"About Nullstack","links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Getting started","href":"/getting-started"}]},{"title":"Core Features","links":[{"title":"Stateless Components","href":"/stateless-components"},{"title":"Stateful components","href":"/stateful-components"},{"title":"Full stack lifecycle","href":"/full-stack-lifecycle"},{"title":"Server functions","href":"/server-functions"},{"title":"Context","href":"/context"},{"title":"Two-way bindings","href":"/two-way-bindings"},{"title":"JSX elements","href":"/jsx-elements"},{"title":"Refs","href":"/refs"},{"title":"Styles","href":"/styles"},{"title":"Persistent Components","href":"/persistent-components"}]},{"title":"Context Keys","links":[{"title":"Routes and params","href":"/routes-and-params"},{"title":"Context data","href":"/context-data"},{"title":"Context instances","href":"/context-instances"},{"title":"Context environment","href":"/context-environment"},{"title":"Context page","href":"/context-page"},{"title":"Context project","href":"/context-project"},{"title":"Context settings","href":"/context-settings"},{"title":"Context secrets","href":"/context-secrets"},{"title":"Server request and response","href":"/server-request-and-response"},{"title":"Service Worker","href":"/service-worker"}]},{"title":"Advanced concepts","links":[{"title":"Proxy","href":"/proxy"},{"title":"Application Startup","href":"/application-startup"},{"title":"Script runner","href":"/script-runner"},{"title":"How to customize Webpack","href":"/how-to-customize-webpack"},{"title":"Transpilation and Security","href":"/transpilation-and-security"},{"title":"TypeScript","href":"/typescript"}]},{"title":"Build Modes","links":[{"title":"Server-side rendering","href":"/server-side-rendering"},{"title":"Static site generation","href":"/static-site-generation"},{"title":"Single page applications","href":"/single-page-applications"}]},{"title":"Other","links":[{"title":"Nullstack Logo","href":"/nullstack-logo"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]}]},"GoogleAnalytics/0-0-0-19":{"persistent":false},"Loader/0-0-0-21":{"persistent":false},"Footer/0-0-0-22":{"persistent":false,"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}},"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"Application Startup - Nullstack","description":"The start function will run only once when your application loads and is a good place for setting up your context"}}
0 commit comments