René's URL Explorer Experiment


Title: Getting Started - Nullstack

Open Graph Title: Getting Started - Nullstack

Description: Create full stack JavaScript applications within seconds

Open Graph Description: Create full stack JavaScript applications within seconds

Opengraph URL: https://nullstack.app/getting-started

Generator: Created with Nullstack - https://nullstack.app

direct link

Domain: nullstack.app

og:imagehttps://nullstack.app/image-1200x630.png
og:typewebsite
og:site_nameNullstack
og:localeen-US
mobile-web-app-capableyes
apple-mobile-web-app-capableyes
application-nameNullstack
apple-mobile-web-app-titleNullstack
msapplication-starturl/
msapplication-TileColor#2d3748
nullstack{"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"Getting Started - Nullstack","description":"Create full stack JavaScript applications within seconds"},"environment":{"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"23ad2dd940244ab04e281282c05613bd73043c4f","name":""},"settings":{},"worker":{"enabled":true,"fetching":false,"preload":["/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/frequently-asked-questions","/full-stack-lifecycle","/getting-started","/how-to-customize-webpack","/how-to-deploy-a-nullstack-application","/jsx-elements","/nullstack-logo","/persistent-components","/proxy","/refs","/routes-and-params","/script-runner","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/stateless-components","/static-site-generation","/styles","/transpilation-and-security","/two-way-bindings","/typescript","/what-is-nullstack","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"staleWhileRevalidate":[],"cacheFirst":[],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true},"params":{"slug":"getting-started"},"project":{"domain":"nullstack.app","name":"Nullstack","color":"#d22365","viewport":"width=device-width, initial-scale=1, shrink-to-fit=no","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"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"},"backgroundColor":"#2d3748"},"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/getting-started":{"title":"Getting Started","html":"
\n

📌 You can watch a video tutorial on our Youtube Channel<\\/a>.<\\/p>\n<\\/blockquote>\n

Create full stack JavaScript applications within seconds using npx<\\/code> to generate your project files from the latest template.<\\/p>\n

\n

🔥 The minimum required node.js<\\/a> version for development mode is 12.20.0<\\/em>.<\\/p>\n<\\/blockquote>\n

Replace project-name<\\/code> with your project name and run the command below to start a project:<\\/p>\n

npx create-<\\/span>nullstack-<\\/span>app@latest project-<\\/span>name\n<\\/code><\\/pre>\n
\n
💡 You can use a CLI to select the blank javascript or typescript template or select the template with tailwind css.<\\/p>\n<\\/blockquote>\n
Change directory to the generated folder:<\\/p>\n
cd project-<\\/span>name\n<\\/code><\\/pre>\n
Install the dependencies:<\\/p>\n
npm install # or yarn\n<\\/code><\\/pre>\n
Start the application in development mode:<\\/p>\n
npm start # or yarn start\n<\\/code><\\/pre>\n
Understanding the generated files<\\/a><\\/h2>
The following folders and files will be generated:<\\/p>\n
server.js<\\/a><\\/h3>
This is the server entry and generator point.<\\/p>\n
It is a convenient place to set up global things like database<\\/a> and manipulate server context<\\/code>, details in application startup<\\/a>.<\\/p>\n
client.js<\\/a><\\/h3>
This is the client entry and generator point.<\\/p>\n
It is a convenient place to import global dependencies like CSS frameworks and manipulate client context<\\/code>.<\\/p>\n
src/<\\/a><\\/h3>
This folder will contain the actual source code of your application.<\\/p>\n
src/Application.jsx<\\/a><\\/h3>
This is your application main file.<\\/p>\n
\n
✨ Learn more about the jsx elements<\\/a>.<\\/p>\n<\\/blockquote>\n
When you run npm start<\\/code> it is consumed in server<\\/strong>/client<\\/strong> JS files by their Nullstack.start<\\/code> function, which starts and returns both context<\\/code><\\/a>, that you can use to set up things like database<\\/a> using settings<\\/a> and secrets<\\/a>.<\\/p>\n
\n
✨ Learn more about the application startup<\\/a>.<\\/p>\n<\\/blockquote>\n
TypeScript<\\/a><\\/h4>
You can use Nullstack with TypeScript, just rename njs<\\/code> to nts<\\/code> or jsx<\\/code> to tsx<\\/code>.<\\/p>\n
src/Application.css<\\/a><\\/h3>
This is an empty file just to demonstrate that you can use CSS with Nullstack<\\/a>.<\\/p>\n
It is a good practice to import a style file in a component with the same name.<\\/p>\n
\n
✨ Learn more about styles<\\/a>.<\\/p>\n<\\/blockquote>\n
public/<\\/a><\\/h3>
Every file in here will be available to anyone from the domain root.<\\/p>\n
By default create-nullstack-app<\\/code> generates the icons required for your manifest.json<\\/strong> and images for OG meta tags.<\\/p>\n
\n
✨ Learn more about manifest.json<\\/a>.<\\/p>\n<\\/blockquote>\n
Be sure to replace these images with your project identity.<\\/p>\n
.development/<\\/a><\\/h3>
This is the compiled result of your application in development mode.<\\/p>\n
\n
🔥 Do not touch this folder<\\/p>\n<\\/blockquote>\n
.production/<\\/a><\\/h3>
This is the compiled result of your application in production mode.<\\/p>\n
\n
🔥 Do not touch this folder<\\/p>\n<\\/blockquote>\n
\n
✨ Learn more about how to deploy a Nullstack application<\\/a>.<\\/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":"Create full stack JavaScript applications within seconds","action":"⚔ Learn [how to create a nullstack project](/getting-started).","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"}}}},"context":{"mode":"light","oppositeMode":"dark"}}

Links:

Nullstack https://nullstack.app/
What is Nullstack?https://nullstack.app/what-is-nullstack
Documentationhttps://nullstack.app/getting-started
Exampleshttps://nullstack.app/examples
Contributorshttps://nullstack.app/contributors
F.A.Qhttps://nullstack.app/frequently-asked-questions
Waifuhttps://nullstack.app/waifu
Portuguêshttps://nullstack.app/pt-br
🇧🇷https://nullstack.app/pt-br
https://discord.gg/eDZfKz264v
Starhttps://github.com/nullstack/nullstack
What is Nullstack?https://nullstack.app/what-is-nullstack
Getting startedhttps://nullstack.app/getting-started
Stateless Componentshttps://nullstack.app/stateless-components
Stateful componentshttps://nullstack.app/stateful-components
Full stack lifecyclehttps://nullstack.app/full-stack-lifecycle
Server functionshttps://nullstack.app/server-functions
Contexthttps://nullstack.app/context
Two-way bindingshttps://nullstack.app/two-way-bindings
JSX elementshttps://nullstack.app/jsx-elements
Refshttps://nullstack.app/refs
Styleshttps://nullstack.app/styles
Persistent Componentshttps://nullstack.app/persistent-components
Routes and paramshttps://nullstack.app/routes-and-params
Context datahttps://nullstack.app/context-data
Context instanceshttps://nullstack.app/context-instances
Context environmenthttps://nullstack.app/context-environment
Context pagehttps://nullstack.app/context-page
Context projecthttps://nullstack.app/context-project
Context settingshttps://nullstack.app/context-settings
Context secretshttps://nullstack.app/context-secrets
Server request and responsehttps://nullstack.app/server-request-and-response
Service Workerhttps://nullstack.app/service-worker
Proxyhttps://nullstack.app/proxy
Application Startuphttps://nullstack.app/application-startup
Script runnerhttps://nullstack.app/script-runner
How to customize Webpackhttps://nullstack.app/how-to-customize-webpack
Transpilation and Securityhttps://nullstack.app/transpilation-and-security
TypeScripthttps://nullstack.app/typescript
Server-side renderinghttps://nullstack.app/server-side-rendering
Static site generationhttps://nullstack.app/static-site-generation
Single page applicationshttps://nullstack.app/single-page-applications
Nullstack Logohttps://nullstack.app/nullstack-logo
How to deployhttps://nullstack.app/how-to-deploy-a-nullstack-application
Youtube Channelhttps://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId
node.jshttps://nodejs.org
Understanding the generated fileshttps://nullstack.app/getting-started#understanding-the-generated-files
server.jshttps://nullstack.app/getting-started#server-js
databasehttps://nullstack.app/how-to-use-mongodb-with-nullstack
application startuphttps://nullstack.app/application-startup
client.jshttps://nullstack.app/getting-started#client-js
src/https://nullstack.app/getting-started#src-
src/Application.jsxhttps://nullstack.app/getting-started#src-application-jsx
jsx elementshttps://nullstack.app/jsx-elements
contexthttps://nullstack.app/context
databasehttps://nullstack.app/how-to-use-mongodb-with-nullstack
settingshttps://nullstack.app/context-settings
secretshttps://nullstack.app/context-secrets
application startuphttps://nullstack.app/application-startup
TypeScripthttps://nullstack.app/getting-started#typescript
src/Application.csshttps://nullstack.app/getting-started#src-application-css
CSS with Nullstackhttps://nullstack.app/styles
styleshttps://nullstack.app/styles
public/https://nullstack.app/getting-started#public-
manifest.jsonhttps://nullstack.app/context-project
.development/https://nullstack.app/getting-started#-development-
.production/https://nullstack.app/getting-started#-production-
how to deploy a Nullstack applicationhttps://nullstack.app/how-to-deploy-a-nullstack-application
Next Step https://nullstack.app/getting-started#next-step
Core Features: Stateless Componentshttps://nullstack.app/stateless-components
Join our Discordhttps://discord.gg/eDZfKz264v
https://twitter.com/nullstackapp
https://github.com/nullstack/nullstack
https://discord.gg/eDZfKz264v
https://www.youtube.com/nullstack
https://www.linkedin.com/company/nullstack-app
Leave a star on GitHubhttps://github.com/nullstack/nullstack/stargazers

Viewport: width=device-width, initial-scale=1, shrink-to-fit=no

URLs of crawlers that visited me.