[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"docs-navigation":3,"\u002Fdocs\u002Ftutorials\u002Freact-router":18,"\u002Fdocs\u002Ftutorials\u002Freact-router-surround":1283},[4,8],{"title":5,"path":6,"stem":7},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",{"title":9,"path":10,"stem":11,"children":12,"page":17},"Tutorials","\u002Fdocs\u002Ftutorials","docs\u002F2.tutorials",[13],{"title":14,"path":15,"stem":16},"React","\u002Fdocs\u002Ftutorials\u002Freact-router","docs\u002F2.tutorials\u002F1.react-router",false,{"id":19,"title":14,"body":20,"description":1278,"extension":1279,"meta":1280,"navigation":86,"path":15,"seo":1281,"stem":16,"__hash__":1282},"docs\u002Fdocs\u002F2.tutorials\u002F1.react-router.md",{"type":21,"value":22,"toc":1270},"minimark",[23,1263,1266],[24,25,27,32,36,60,63,285,295,298,312,316,319,322,335,338,353,360,372,376,383,410,415,601,605,612,625,639,994,1005,1009,1017,1110,1118,1122,1133],"steps",{"level":26},"3",[28,29,31],"h3",{"id":30},"create-a-react-router-project","Create a React Router project",[33,34,35],"p",{},"Run the following command in your terminal",[37,38,44],"pre",{"className":39,"code":40,"filename":41,"language":42,"meta":43,"style":43},"language-bash shiki shiki-themes material-theme-lighter github-dark-default github-dark-default","npx create-react-router@latest\n","Terminal","bash","",[45,46,47],"code",{"__ignoreMap":43},[48,49,52,56],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"se-ri","npx",[48,57,59],{"class":58},"soMwW"," create-react-router@latest\n",[33,61,62],{},"You’ll see an output similar to this:",[37,64,71],{"className":39,"code":65,"filename":41,"highlights":66,"language":42,"meta":43,"style":43},"create-react-router v7.4.0\n\nWhere should we create your new project?\nreact-example\n\n◼ Using default template See https:\u002F\u002Fgithub.com\u002Fremix-run\u002Freact-router-templates for more\n✔ Template copied\n\nInitialize a new git repository?\nYes\n\nInstall dependencies with npm?\nYes\n\n✔ Dependencies installed\n✔ Git initialized\n\nThat's it!\n\nEnter your project directory using cd .\u002Freact-example\nCheck out README.md for development and deploy instructions.\n\nJoin the community at https:\u002F\u002Frmx.as\u002Fdiscord\n",[67,68,69,70],4,10,13,20,[45,72,73,81,88,112,119,124,151,163,168,185,191,196,211,216,221,232,243,248,257,262,268,274,279],{"__ignoreMap":43},[48,74,75,78],{"class":50,"line":51},[48,76,77],{"class":54},"create-react-router",[48,79,80],{"class":58}," v7.4.0\n",[48,82,84],{"class":50,"line":83},2,[48,85,87],{"emptyLinePlaceholder":86},true,"\n",[48,89,91,94,97,100,103,106,109],{"class":50,"line":90},3,[48,92,93],{"class":54},"Where",[48,95,96],{"class":58}," should",[48,98,99],{"class":58}," we",[48,101,102],{"class":58}," create",[48,104,105],{"class":58}," your",[48,107,108],{"class":58}," new",[48,110,111],{"class":58}," project?\n",[48,113,116],{"class":114,"line":67},[50,115],"highlight",[48,117,118],{"class":54},"react-example\n",[48,120,122],{"class":50,"line":121},5,[48,123,87],{"emptyLinePlaceholder":86},[48,125,127,130,133,136,139,142,145,148],{"class":50,"line":126},6,[48,128,129],{"class":54},"◼",[48,131,132],{"class":58}," Using",[48,134,135],{"class":58}," default",[48,137,138],{"class":58}," template",[48,140,141],{"class":58}," See",[48,143,144],{"class":58}," https:\u002F\u002Fgithub.com\u002Fremix-run\u002Freact-router-templates",[48,146,147],{"class":58}," for",[48,149,150],{"class":58}," more\n",[48,152,154,157,160],{"class":50,"line":153},7,[48,155,156],{"class":54},"✔",[48,158,159],{"class":58}," Template",[48,161,162],{"class":58}," copied\n",[48,164,166],{"class":50,"line":165},8,[48,167,87],{"emptyLinePlaceholder":86},[48,169,171,174,177,179,182],{"class":50,"line":170},9,[48,172,173],{"class":54},"Initialize",[48,175,176],{"class":58}," a",[48,178,108],{"class":58},[48,180,181],{"class":58}," git",[48,183,184],{"class":58}," repository?\n",[48,186,188],{"class":187,"line":68},[50,115],[48,189,190],{"class":54},"Yes\n",[48,192,194],{"class":50,"line":193},11,[48,195,87],{"emptyLinePlaceholder":86},[48,197,199,202,205,208],{"class":50,"line":198},12,[48,200,201],{"class":54},"Install",[48,203,204],{"class":58}," dependencies",[48,206,207],{"class":58}," with",[48,209,210],{"class":58}," npm?\n",[48,212,214],{"class":213,"line":69},[50,115],[48,215,190],{"class":54},[48,217,219],{"class":50,"line":218},14,[48,220,87],{"emptyLinePlaceholder":86},[48,222,224,226,229],{"class":50,"line":223},15,[48,225,156],{"class":54},[48,227,228],{"class":58}," Dependencies",[48,230,231],{"class":58}," installed\n",[48,233,235,237,240],{"class":50,"line":234},16,[48,236,156],{"class":54},[48,238,239],{"class":58}," Git",[48,241,242],{"class":58}," initialized\n",[48,244,246],{"class":50,"line":245},17,[48,247,87],{"emptyLinePlaceholder":86},[48,249,251,254],{"class":50,"line":250},18,[48,252,253],{"class":54},"That",[48,255,256],{"class":54},"'s it!\n",[48,258,260],{"class":50,"line":259},19,[48,261,87],{"emptyLinePlaceholder":86},[48,263,265],{"class":264,"line":70},[50,115],[48,266,267],{"class":54},"Enter your project directory using cd .\u002Freact-example\n",[48,269,271],{"class":50,"line":270},21,[48,272,273],{"class":54},"Check out README.md for development and deploy instructions.\n",[48,275,277],{"class":50,"line":276},22,[48,278,87],{"emptyLinePlaceholder":86},[48,280,282],{"class":50,"line":281},23,[48,283,284],{"class":54},"Join the community at https:\u002F\u002Frmx.as\u002Fdiscord\n",[33,286,287,288,294],{},"Refer ",[289,290,14],"a",{"href":291,"rel":292},"https:\u002F\u002Freact.dev\u002Flearn\u002Fcreating-a-react-app#react-router-v7",[293],"nofollow"," Docs for more info.",[33,296,297],{},"Next, move into the generated project directory to view the project's files:",[37,299,301],{"className":39,"code":300,"filename":41,"language":42,"meta":43,"style":43},"cd react-example\n",[45,302,303],{"__ignoreMap":43},[48,304,305,309],{"class":50,"line":51},[48,306,308],{"class":307},"sDV3r","cd",[48,310,311],{"class":58}," react-example\n",[28,313,315],{"id":314},"run-the-react-app-locally","Run the React app locally",[33,317,318],{},"Next, launch the application locally to make sure everything is running as expected.",[33,320,321],{},"Before starting the development server, ensure all dependencies are installed:",[37,323,325],{"className":39,"code":324,"filename":41,"language":42,"meta":43,"style":43},"npm install\n",[45,326,327],{"__ignoreMap":43},[48,328,329,332],{"class":50,"line":51},[48,330,331],{"class":54},"npm",[48,333,334],{"class":58}," install\n",[33,336,337],{},"To start the development server, run:",[37,339,341],{"className":39,"code":340,"filename":41,"language":42,"meta":43,"style":43},"npm run dev\n",[45,342,343],{"__ignoreMap":43},[48,344,345,347,350],{"class":50,"line":51},[48,346,331],{"class":54},[48,348,349],{"class":58}," run",[48,351,352],{"class":58}," dev\n",[33,354,355,356,359],{},"If you navigate to ",[45,357,358],{},"http:\u002F\u002Flocalhost:5173"," in your browser, you will see a standard React Router landing page.",[33,361,362,363,367,368,371],{},"Press ",[364,365],"kbd",{"value":366},"ctrl"," ",[364,369],{"value":370},"C"," to stop the development server after verifying.",[28,373,375],{"id":374},"add-dockerfile","Add Dockerfile",[33,377,378,379,382],{},"Next, add a file called ",[45,380,381],{},".dockerignore"," to the project's root directory. Paste the following contents:",[37,384,388],{"className":385,"code":386,"filename":381,"language":387,"meta":43,"style":43},"language-docker shiki shiki-themes material-theme-lighter github-dark-default github-dark-default",".react-router\nbuild\nnode_modules\nREADME.md\n","docker",[45,389,390,395,400,405],{"__ignoreMap":43},[48,391,392],{"class":50,"line":51},[48,393,394],{},".react-router\n",[48,396,397],{"class":50,"line":83},[48,398,399],{},"build\n",[48,401,402],{"class":50,"line":90},[48,403,404],{},"node_modules\n",[48,406,407],{"class":50,"line":67},[48,408,409],{},"README.md\n",[33,411,378,412,382],{},[45,413,414],{},"Dockerfile",[37,416,420],{"className":417,"code":418,"filename":414,"language":419,"meta":43,"style":43},"language-dockerfile shiki shiki-themes material-theme-lighter github-dark-default github-dark-default","FROM node:20-alpine AS development-dependencies-env\nCOPY . \u002Fapp\nWORKDIR \u002Fapp\nRUN npm ci\n\nFROM node:20-alpine AS production-dependencies-env\nCOPY .\u002Fpackage.json package-lock.json \u002Fapp\u002F\nWORKDIR \u002Fapp\nRUN npm ci --omit=dev\n\nFROM node:20-alpine AS build-env\nCOPY . \u002Fapp\u002F\nCOPY --from=development-dependencies-env \u002Fapp\u002Fnode_modules \u002Fapp\u002Fnode_modules\nWORKDIR \u002Fapp\nRUN npm run build\n\nFROM node:20-alpine\nCOPY .\u002Fpackage.json package-lock.json \u002Fapp\u002F\nCOPY --from=production-dependencies-env \u002Fapp\u002Fnode_modules \u002Fapp\u002Fnode_modules\nCOPY --from=build-env \u002Fapp\u002Fbuild \u002Fapp\u002Fbuild\nWORKDIR \u002Fapp\nCMD [\"npm\", \"run\", \"start\"]\n","dockerfile",[45,421,422,438,446,454,462,466,477,484,490,497,501,512,519,526,532,539,543,550,556,563,570,576],{"__ignoreMap":43},[48,423,424,428,432,435],{"class":50,"line":51},[48,425,427],{"class":426},"syaNO","FROM",[48,429,431],{"class":430},"sINcL"," node:20-alpine ",[48,433,434],{"class":426},"AS",[48,436,437],{"class":430}," development-dependencies-env\n",[48,439,440,443],{"class":50,"line":83},[48,441,442],{"class":426},"COPY",[48,444,445],{"class":430}," . \u002Fapp\n",[48,447,448,451],{"class":50,"line":90},[48,449,450],{"class":426},"WORKDIR",[48,452,453],{"class":430}," \u002Fapp\n",[48,455,456,459],{"class":50,"line":67},[48,457,458],{"class":426},"RUN",[48,460,461],{"class":430}," npm ci\n",[48,463,464],{"class":50,"line":121},[48,465,87],{"emptyLinePlaceholder":86},[48,467,468,470,472,474],{"class":50,"line":126},[48,469,427],{"class":426},[48,471,431],{"class":430},[48,473,434],{"class":426},[48,475,476],{"class":430}," production-dependencies-env\n",[48,478,479,481],{"class":50,"line":153},[48,480,442],{"class":426},[48,482,483],{"class":430}," .\u002Fpackage.json package-lock.json \u002Fapp\u002F\n",[48,485,486,488],{"class":50,"line":165},[48,487,450],{"class":426},[48,489,453],{"class":430},[48,491,492,494],{"class":50,"line":170},[48,493,458],{"class":426},[48,495,496],{"class":430}," npm ci --omit=dev\n",[48,498,499],{"class":50,"line":68},[48,500,87],{"emptyLinePlaceholder":86},[48,502,503,505,507,509],{"class":50,"line":193},[48,504,427],{"class":426},[48,506,431],{"class":430},[48,508,434],{"class":426},[48,510,511],{"class":430}," build-env\n",[48,513,514,516],{"class":50,"line":198},[48,515,442],{"class":426},[48,517,518],{"class":430}," . \u002Fapp\u002F\n",[48,520,521,523],{"class":50,"line":69},[48,522,442],{"class":426},[48,524,525],{"class":430}," --from=development-dependencies-env \u002Fapp\u002Fnode_modules \u002Fapp\u002Fnode_modules\n",[48,527,528,530],{"class":50,"line":218},[48,529,450],{"class":426},[48,531,453],{"class":430},[48,533,534,536],{"class":50,"line":223},[48,535,458],{"class":426},[48,537,538],{"class":430}," npm run build\n",[48,540,541],{"class":50,"line":234},[48,542,87],{"emptyLinePlaceholder":86},[48,544,545,547],{"class":50,"line":245},[48,546,427],{"class":426},[48,548,549],{"class":430}," node:20-alpine\n",[48,551,552,554],{"class":50,"line":250},[48,553,442],{"class":426},[48,555,483],{"class":430},[48,557,558,560],{"class":50,"line":259},[48,559,442],{"class":426},[48,561,562],{"class":430}," --from=production-dependencies-env \u002Fapp\u002Fnode_modules \u002Fapp\u002Fnode_modules\n",[48,564,565,567],{"class":50,"line":70},[48,566,442],{"class":426},[48,568,569],{"class":430}," --from=build-env \u002Fapp\u002Fbuild \u002Fapp\u002Fbuild\n",[48,571,572,574],{"class":50,"line":270},[48,573,450],{"class":426},[48,575,453],{"class":430},[48,577,578,581,584,587,590,593,595,598],{"class":50,"line":276},[48,579,580],{"class":426},"CMD",[48,582,583],{"class":430}," [",[48,585,586],{"class":58},"\"npm\"",[48,588,589],{"class":430},", ",[48,591,592],{"class":58},"\"run\"",[48,594,589],{"class":430},[48,596,597],{"class":58},"\"start\"",[48,599,600],{"class":430},"]\n",[28,602,604],{"id":603},"set-up-github-actions-workflow","Set Up GitHub Actions Workflow",[33,606,607,608,611],{},"Next, add the GitHub Actions workflow to the repository. Create a new file named ",[45,609,610],{},".github\u002Fworkflows\u002Fpyrite.yml"," in the root directory of the project.",[37,613,615],{"className":39,"code":614,"filename":41,"language":42,"meta":43,"style":43},"touch .github\u002Fworkflows\u002Fpyrite.yml\n",[45,616,617],{"__ignoreMap":43},[48,618,619,622],{"class":50,"line":51},[48,620,621],{"class":54},"touch",[48,623,624],{"class":58}," .github\u002Fworkflows\u002Fpyrite.yml\n",[33,626,627,628,630,631,634,635,638],{},"Open ",[45,629,610],{}," and insert the following content, Replace ",[45,632,633],{},"\u003CYOUR_GITHUB_USERNAME>"," and ",[45,636,637],{},"\u003CYOUR_REPOSITORY_NAME>"," with your actual GitHub username and repository name:",[37,640,652],{"className":641,"code":642,"filename":610,"highlights":643,"language":651,"meta":43,"style":43},"language-yaml shiki shiki-themes material-theme-lighter github-dark-default github-dark-default","name: pyrite\n\non:\n  push:\n    branches:\n      - main\n\npermissions:\n  contents: read\n  packages: write\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions\u002Fcheckout@v4\n\n      - name: Set up QEMU\n        uses: docker\u002Fsetup-qemu-action@v3\n\n      - name: Set up Docker Buildx\n        uses: docker\u002Fsetup-buildx-action@v3\n      \n      # Note: You can also use any other container registry\n      - name: Login to GitHub Container Registry\n        uses: docker\u002Flogin-action@v3\n        with:\n          registry: ghcr.io\n          username: ${{ github.repository_owner }}\n          password: ${{ secrets.GITHUB_TOKEN }}\n\n      - name: Build and push\n        uses: docker\u002Fbuild-push-action@v5\n        with:\n          context: .\n          tags: ghcr.io\u002F\u003CYOUR_GITHUB_USERNAME>\u002F\u003CYOUR_REPOSITORY_NAME>:latest\n          platforms: linux\u002Famd64\n          push: true\n",[51,644,645,646,647,648,649,650],26,27,28,29,30,31,37,"yaml",[45,653,654,668,672,681,688,695,703,707,714,724,734,738,745,752,762,769,781,791,795,806,815,819,830,839,845,852,864,874,882,893,904,915,920,932,942,949,961,972,983],{"__ignoreMap":43},[48,655,657,661,665],{"class":656,"line":51},[50,115],[48,658,660],{"class":659},"sErBm","name",[48,662,664],{"class":663},"sZegt",":",[48,666,667],{"class":58}," pyrite\n",[48,669,670],{"class":50,"line":83},[48,671,87],{"emptyLinePlaceholder":86},[48,673,674,678],{"class":50,"line":90},[48,675,677],{"class":676},"sfY92","on",[48,679,680],{"class":663},":\n",[48,682,683,686],{"class":50,"line":67},[48,684,685],{"class":659},"  push",[48,687,680],{"class":663},[48,689,690,693],{"class":50,"line":121},[48,691,692],{"class":659},"    branches",[48,694,680],{"class":663},[48,696,697,700],{"class":50,"line":126},[48,698,699],{"class":663},"      -",[48,701,702],{"class":58}," main\n",[48,704,705],{"class":50,"line":153},[48,706,87],{"emptyLinePlaceholder":86},[48,708,709,712],{"class":50,"line":165},[48,710,711],{"class":659},"permissions",[48,713,680],{"class":663},[48,715,716,719,721],{"class":50,"line":170},[48,717,718],{"class":659},"  contents",[48,720,664],{"class":663},[48,722,723],{"class":58}," read\n",[48,725,726,729,731],{"class":50,"line":68},[48,727,728],{"class":659},"  packages",[48,730,664],{"class":663},[48,732,733],{"class":58}," write\n",[48,735,736],{"class":50,"line":193},[48,737,87],{"emptyLinePlaceholder":86},[48,739,740,743],{"class":50,"line":198},[48,741,742],{"class":659},"jobs",[48,744,680],{"class":663},[48,746,747,750],{"class":50,"line":69},[48,748,749],{"class":659},"  build",[48,751,680],{"class":663},[48,753,754,757,759],{"class":50,"line":218},[48,755,756],{"class":659},"    runs-on",[48,758,664],{"class":663},[48,760,761],{"class":58}," ubuntu-latest\n",[48,763,764,767],{"class":50,"line":223},[48,765,766],{"class":659},"    steps",[48,768,680],{"class":663},[48,770,771,773,776,778],{"class":50,"line":234},[48,772,699],{"class":663},[48,774,775],{"class":659}," name",[48,777,664],{"class":663},[48,779,780],{"class":58}," Checkout\n",[48,782,783,786,788],{"class":50,"line":245},[48,784,785],{"class":659},"        uses",[48,787,664],{"class":663},[48,789,790],{"class":58}," actions\u002Fcheckout@v4\n",[48,792,793],{"class":50,"line":250},[48,794,87],{"emptyLinePlaceholder":86},[48,796,797,799,801,803],{"class":50,"line":259},[48,798,699],{"class":663},[48,800,775],{"class":659},[48,802,664],{"class":663},[48,804,805],{"class":58}," Set up QEMU\n",[48,807,808,810,812],{"class":50,"line":70},[48,809,785],{"class":659},[48,811,664],{"class":663},[48,813,814],{"class":58}," docker\u002Fsetup-qemu-action@v3\n",[48,816,817],{"class":50,"line":270},[48,818,87],{"emptyLinePlaceholder":86},[48,820,821,823,825,827],{"class":50,"line":276},[48,822,699],{"class":663},[48,824,775],{"class":659},[48,826,664],{"class":663},[48,828,829],{"class":58}," Set up Docker Buildx\n",[48,831,832,834,836],{"class":50,"line":281},[48,833,785],{"class":659},[48,835,664],{"class":663},[48,837,838],{"class":58}," docker\u002Fsetup-buildx-action@v3\n",[48,840,842],{"class":50,"line":841},24,[48,843,844],{"class":430},"      \n",[48,846,848],{"class":50,"line":847},25,[48,849,851],{"class":850},"sTKkQ","      # Note: You can also use any other container registry\n",[48,853,855,857,859,861],{"class":854,"line":644},[50,115],[48,856,699],{"class":663},[48,858,775],{"class":659},[48,860,664],{"class":663},[48,862,863],{"class":58}," Login to GitHub Container Registry\n",[48,865,867,869,871],{"class":866,"line":645},[50,115],[48,868,785],{"class":659},[48,870,664],{"class":663},[48,872,873],{"class":58}," docker\u002Flogin-action@v3\n",[48,875,877,880],{"class":876,"line":646},[50,115],[48,878,879],{"class":659},"        with",[48,881,680],{"class":663},[48,883,885,888,890],{"class":884,"line":647},[50,115],[48,886,887],{"class":659},"          registry",[48,889,664],{"class":663},[48,891,892],{"class":58}," ghcr.io\n",[48,894,896,899,901],{"class":895,"line":648},[50,115],[48,897,898],{"class":659},"          username",[48,900,664],{"class":663},[48,902,903],{"class":58}," ${{ github.repository_owner }}\n",[48,905,907,910,912],{"class":906,"line":649},[50,115],[48,908,909],{"class":659},"          password",[48,911,664],{"class":663},[48,913,914],{"class":58}," ${{ secrets.GITHUB_TOKEN }}\n",[48,916,918],{"class":50,"line":917},32,[48,919,87],{"emptyLinePlaceholder":86},[48,921,923,925,927,929],{"class":50,"line":922},33,[48,924,699],{"class":663},[48,926,775],{"class":659},[48,928,664],{"class":663},[48,930,931],{"class":58}," Build and push\n",[48,933,935,937,939],{"class":50,"line":934},34,[48,936,785],{"class":659},[48,938,664],{"class":663},[48,940,941],{"class":58}," docker\u002Fbuild-push-action@v5\n",[48,943,945,947],{"class":50,"line":944},35,[48,946,879],{"class":659},[48,948,680],{"class":663},[48,950,952,955,957],{"class":50,"line":951},36,[48,953,954],{"class":659},"          context",[48,956,664],{"class":663},[48,958,960],{"class":959},"smher"," .\n",[48,962,964,967,969],{"class":963,"line":650},[50,115],[48,965,966],{"class":659},"          tags",[48,968,664],{"class":663},[48,970,971],{"class":58}," ghcr.io\u002F\u003CYOUR_GITHUB_USERNAME>\u002F\u003CYOUR_REPOSITORY_NAME>:latest\n",[48,973,975,978,980],{"class":50,"line":974},38,[48,976,977],{"class":659},"          platforms",[48,979,664],{"class":663},[48,981,982],{"class":58}," linux\u002Famd64\n",[48,984,986,989,991],{"class":50,"line":985},39,[48,987,988],{"class":659},"          push",[48,990,664],{"class":663},[48,992,993],{"class":676}," true\n",[995,996,997],"note",{},[33,998,999,1000,634,1002,1004],{},"Remember to replace the values of ",[45,1001,633],{},[45,1003,637],{}," with your actual values.",[28,1006,1008],{"id":1007},"push-the-project-to-github","Push the project to GitHub",[33,1010,1011,1012,634,1014,1016],{},"Next, push the changes to GitHub. You can use the following commands, replace ",[45,1013,633],{},[45,1015,637],{}," with your actual GitHub username and repository name.",[37,1018,1020],{"className":39,"code":1019,"filename":41,"language":42,"meta":43,"style":43},"git add .\ngit commit -m \"Initial commit\"\ngit remote add origin git@github.com:\u003CYOUR_GITHUB_USERNAME>\u002F\u003CYOUR_REPOSITORY_NAME>.git\ngit push -u origin main\n",[45,1021,1022,1032,1053,1096],{"__ignoreMap":43},[48,1023,1024,1027,1030],{"class":50,"line":51},[48,1025,1026],{"class":54},"git",[48,1028,1029],{"class":58}," add",[48,1031,960],{"class":58},[48,1033,1034,1036,1039,1043,1047,1050],{"class":50,"line":83},[48,1035,1026],{"class":54},[48,1037,1038],{"class":58}," commit",[48,1040,1042],{"class":1041},"sx258"," -m",[48,1044,1046],{"class":1045},"sDFjk"," \"",[48,1048,1049],{"class":58},"Initial commit",[48,1051,1052],{"class":1045},"\"\n",[48,1054,1055,1057,1060,1062,1065,1068,1072,1075,1078,1081,1084,1086,1089,1091,1093],{"class":50,"line":90},[48,1056,1026],{"class":54},[48,1058,1059],{"class":58}," remote",[48,1061,1029],{"class":58},[48,1063,1064],{"class":58}," origin",[48,1066,1067],{"class":58}," git@github.com:",[48,1069,1071],{"class":1070},"sebAQ","\u003C",[48,1073,1074],{"class":58},"YOUR_GITHUB_USERNAM",[48,1076,1077],{"class":430},"E",[48,1079,1080],{"class":1070},">",[48,1082,1083],{"class":58},"\u002F",[48,1085,1071],{"class":1070},[48,1087,1088],{"class":58},"YOUR_REPOSITORY_NAM",[48,1090,1077],{"class":430},[48,1092,1080],{"class":1070},[48,1094,1095],{"class":58},".git\n",[48,1097,1098,1100,1103,1106,1108],{"class":50,"line":67},[48,1099,1026],{"class":54},[48,1101,1102],{"class":58}," push",[48,1104,1105],{"class":1041}," -u",[48,1107,1064],{"class":58},[48,1109,702],{"class":58},[995,1111,1112],{},[33,1113,999,1114,634,1116,1004],{},[45,1115,633],{},[45,1117,637],{},[28,1119,1121],{"id":1120},"deploy-to-pyrite-cloud","Deploy to Pyrite Cloud",[33,1123,1124,1125,1127,1128,664],{},"To deploy the ",[45,1126,14],{}," app on Pyrite Cloud, follow these steps on the ",[289,1129,1132],{"href":1130,"rel":1131},"https:\u002F\u002Fpyrite.cloud\u002Fteams",[293],"Dashboard",[1134,1135,1136,1144,1158,1164,1173,1181,1190,1245,1253],"ol",{},[1137,1138,1139,1143],"li",{},[1140,1141,1142],"strong",{},"Log In:"," Sign in to your Pyrite Cloud account.",[1137,1145,1146,1149,1150,1153,1154,1157],{},[1140,1147,1148],{},"Create a Team:"," Click ",[1140,1151,1152],{},"Create Team",", enter your team name and subscription details, then click ",[1140,1155,1156],{},"Create",".",[1137,1159,1160,1163],{},[1140,1161,1162],{},"Select Your Team:"," Click on the team you just created.",[1137,1165,1166,1149,1169,1172],{},[1140,1167,1168],{},"Create a Project:",[1140,1170,1171],{},"Create Project"," and enter your project name.",[1137,1174,1175,1149,1178,1157],{},[1140,1176,1177],{},"Create a New Service:",[1140,1179,1180],{},"New Service",[1137,1182,1183,1186,1187,1157],{},[1140,1184,1185],{},"Deploy as a Web Service:"," Under the Web section, click ",[1140,1188,1189],{},"Deploy",[1137,1191,1192,1195],{},[1140,1193,1194],{},"Configure Deployment:",[1196,1197,1198,1204,1210,1219,1229,1239],"ul",{},[1137,1199,1200,1203],{},[1140,1201,1202],{},"Select Team & Project:"," Choose the team and project you created.",[1137,1205,1206,1209],{},[1140,1207,1208],{},"Service Name:"," Enter the desired name for your service.",[1137,1211,1212,1215,1216,1157],{},[1140,1213,1214],{},"Runtime:"," Select ",[1140,1217,1218],{},"Docker runtime",[1137,1220,1221,1224,1225,1228],{},[1140,1222,1223],{},"Docker Image Name:"," Enter the image name (available in the ",[1140,1226,1227],{},"Packages"," section of your GitHub repository).",[1137,1230,1231,1234,1235,1238],{},[1140,1232,1233],{},"Port:"," Set the port number to ",[1140,1236,1237],{},"3000"," (or the port your app uses).",[1137,1240,1241,1244],{},[1140,1242,1243],{},"Plan & Region:"," Choose your preferred plan and region.",[1137,1246,1247,1149,1250,1252],{},[1140,1248,1249],{},"Deploy:",[1140,1251,1189],{}," and wait for the process to complete.",[1137,1254,1255,1258,1259,1262],{},[1140,1256,1257],{},"Access Your App:"," Once deployment is finished, click the ",[1140,1260,1261],{},"Open Link"," button to view your app.",[33,1264,1265],{},"Thats it! You have successfully deployed a React website on Pyrite Cloud.",[1267,1268,1269],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .se-ri, html code.shiki .se-ri{--shiki-light:#E2931D;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .soMwW, html code.shiki .soMwW{--shiki-light:#91B859;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sDV3r, html code.shiki .sDV3r{--shiki-light:#6182B8;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .syaNO, html code.shiki .syaNO{--shiki-light:#F76D47;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sINcL, html code.shiki .sINcL{--shiki-light:#90A4AE;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sErBm, html code.shiki .sErBm{--shiki-light:#E53935;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .sZegt, html code.shiki .sZegt{--shiki-light:#39ADB5;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sfY92, html code.shiki .sfY92{--shiki-light:#FF5370;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sTKkQ, html code.shiki .sTKkQ{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#8B949E;--shiki-default-font-style:inherit;--shiki-dark:#8B949E;--shiki-dark-font-style:inherit}html pre.shiki code .smher, html code.shiki .smher{--shiki-light:#F76D47;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sx258, html code.shiki .sx258{--shiki-light:#91B859;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sDFjk, html code.shiki .sDFjk{--shiki-light:#39ADB5;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sebAQ, html code.shiki .sebAQ{--shiki-light:#39ADB5;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}",{"title":43,"searchDepth":83,"depth":83,"links":1271},[1272,1273,1274,1275,1276,1277],{"id":30,"depth":90,"text":31},{"id":314,"depth":90,"text":315},{"id":374,"depth":90,"text":375},{"id":603,"depth":90,"text":604},{"id":1007,"depth":90,"text":1008},{"id":1120,"depth":90,"text":1121},"How to deploy React website on Pyrite Cloud.","md",{},{"title":14,"description":1278},"25l69XKmpTuKYq-9wOB8__70hbC1I2-_Gy-fAuBEzxU",[1284,1285],{"title":5,"path":6,"stem":7,"children":-1},null]