[{"data":1,"prerenderedAt":137},["ShallowReactive",2],{"content-paved-path-lift-and-shift-a-web-app-to-serverless-6-webapp-migration":3},{"markdown":4,"frontMatterAttributes":5,"bodyRaw":9,"contributorPaths":10,"menuType":12,"contentName":13,"slug":14,"readingTime":15,"menu":16,"nextDocItem":79,"previousDocItem":65},"\u003Cp>The final layer to migrate is the React application. The best way to migrate the web layer and to adhere to the migration requirements is to use AWS Amplify to host it. AWS Amplify is a fully managed service that provides many features like hosting web applications and managing the CI\u002FCD process for the web app. It provides client libraries to connect to different AWS resources, and many other features.\u003C\u002Fp>\n\u003Cp>Migrating the React application is as simple as creating a new Amplify application in your AWS account and uploading the React application to a code repository like GitHub. This AWS Amplify application is connected to a GitHub branch, and when there is a new commit in this branch, AWS Amplify redeploys the code.\u003C\u002Fp>\n\u003Cp>The Amplify application receives configuration parameters like the function URL endpoint (the server URL) using environmental variables.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js\">const amplifyApp = new App(this, `${props.stage}-AmplifyReactShopApp`, {\n    sourceCodeProvider: new GitHubSourceCodeProvider({\n        owner: config.frontend.owner,\n        repository: config.frontend.repository_name,\n        oauthToken: SecretValue.secretsManager('github-token'),\n    }),\n    environmentVariables: {\n        REGION: this.region,\n        SERVER_URL: props.serverURL,\n    },\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>If you want to see a step-by-step guide on how to make your web layer serverless, you can check the video above.\u003C\u002Fp>\n\u003Ch3>Issues with this solution\u003C\u002Fh3>\n\u003Cp>Now, if you try this migrated app, you will find two issues. The first one is that the user session is not sticky. Every time you log in, you are logged out unexpectedly from the application. The second one is that when you create a new product, you cannot upload new images of that product. Let’s analyze each of the problems in detail and find solutions.\u003C\u002Fp>\n",{"title":6,"order":7,"youtubeVideoID":8},"Web app migration",6,"gQn4XPfpdZE","The final layer to migrate is the React application. The best way to migrate the web layer and to adhere to the migration requirements is to use AWS Amplify to host it. AWS Amplify is a fully managed service that provides many features like hosting web applications and managing the CI\u002FCD process for the web app. It provides client libraries to connect to different AWS resources, and many other features.\n\nMigrating the React application is as simple as creating a new Amplify application in your AWS account and uploading the React application to a code repository like GitHub. This AWS Amplify application is connected to a GitHub branch, and when there is a new commit in this branch, AWS Amplify redeploys the code.\n\nThe Amplify application receives configuration parameters like the function URL endpoint (the server URL) using environmental variables.\n\n```js\nconst amplifyApp = new App(this, `${props.stage}-AmplifyReactShopApp`, {\n    sourceCodeProvider: new GitHubSourceCodeProvider({\n        owner: config.frontend.owner,\n        repository: config.frontend.repository_name,\n        oauthToken: SecretValue.secretsManager('github-token'),\n    }),\n    environmentVariables: {\n        REGION: this.region,\n        SERVER_URL: props.serverURL,\n    },\n});\n```\n\nIf you want to see a step-by-step guide on how to make your web layer serverless, you can check the video above.\n\n### Issues with this solution\n\nNow, if you try this migrated app, you will find two issues. The first one is that the user session is not sticky. Every time you log in, you are logged out unexpectedly from the application. The second one is that when you create a new product, you cannot upload new images of that product. Let’s analyze each of the problems in detail and find solutions.\n",[11],"content\u002Fcontributors\u002Fmarcia-villalba.json","LESSON","Lift and shift a web app to serverless","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F6-webapp-migration","2 min",[17,36,46,54,63,72,77,87,96,105,113,122,130],{"title":18,"content":19},"Introduction",[20],{"title":18,"order":21,"youtubeVideoID":22,"learningGoals":23,"resources":28,"time":15,"path":33,"id":34,"link":35},1,"O-hSs7aF7JE",[24,25,26,27],"Understand what lift and shift migrations are","Understand the benefits of serverless architecture","Learn how to migrate applications and databases from serverful to serverless","Learn patterns for migrating your services onto AWS.",[29],{"link":30,"text":31,"type":32},"https:\u002F\u002Fblog.marcia.dev\u002Flift-and-shift-a-web-app-to-serverless#heading-requirements-for-migration","Lift and shift to Serverless","text","1-introduction","1-introduction.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F1-introduction",{"title":37,"content":38},"Guide",[39],{"title":40,"order":41,"time":42,"path":43,"id":44,"link":45},"Requirements for migration",2,"1 min","2-requirements-for-migration","2-requirements-for-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F2-requirements-for-migration",{"title":-1,"content":47},[48],{"title":49,"order":50,"time":42,"path":51,"id":52,"link":53},"Application overview",3,"3-application-overview","3-application-overview.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F3-application-overview",{"title":-1,"content":55},[56],{"title":57,"order":58,"youtubeVideoID":59,"time":42,"path":60,"id":61,"link":62},"Database migration",4,"Mic2TGzzVXk","4-database-migration","4-database-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F4-database-migration",{"title":-1,"content":64},[65],{"title":66,"order":67,"youtubeVideoID":68,"time":15,"path":69,"id":70,"link":71},"Backend migration",5,"MvVaFPCdiZY","5-backend-migration","5-backend-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F5-backend-migration",{"title":-1,"content":73},[74],{"title":6,"order":7,"youtubeVideoID":8,"time":15,"path":75,"id":76,"link":14},"6-webapp-migration","6-webapp-migration.md",{"title":-1,"content":78},[79],{"title":80,"order":81,"youtubeVideoID":82,"time":83,"path":84,"id":85,"link":86},"Authentication and authorization migration",7,"KRnZvbVT7uk","3 min","7-authentication-and-authorization-migration","7-authentication-and-authorization-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F7-authentication-and-authorization-migration",{"title":-1,"content":88},[89],{"title":90,"order":91,"youtubeVideoID":92,"time":15,"path":93,"id":94,"link":95},"Storage migration",9,"Z4frDpp4PcM","8-storage-migration","8-storage-migration.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F8-storage-migration",{"title":-1,"content":97},[98],{"title":99,"order":100,"youtubeVideoID":101,"time":42,"path":102,"id":103,"link":104},"Testing this application",11,"U_7xD-o5mCA","9-testing-this-application","9-testing-this-application.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F9-testing-this-application",{"title":-1,"content":106},[107],{"title":108,"order":109,"youtubeVideoID":101,"time":15,"path":110,"id":111,"link":112},"How much does this application cost?",12,"10-pricing-of-migrated-application","10-pricing-of-migrated-application.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F10-pricing-of-migrated-application",{"title":-1,"content":114},[115],{"title":116,"order":117,"youtubeVideoID":118,"time":83,"path":119,"id":120,"link":121},"Performance analysis",13,"B0pDPSQcAf4","11-performance-analysis","11-performance-analysis.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F11-performance-analysis",{"title":-1,"content":123},[124],{"title":125,"order":126,"time":42,"path":127,"id":128,"link":129},"Conclusion",14,"12-conclusion","12-conclusion.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F12-conclusion",{"title":-1,"content":131},[132],{"title":133,"order":117,"time":42,"path":134,"id":135,"link":136},"Extra resources","13-extra-resources","13-extra-resources.md","\u002Fcontent\u002Fpaved-path\u002Flift-and-shift-a-web-app-to-serverless\u002F13-extra-resources",1792665265266]