I've recently tried getting into the whole Node ecosystem and am trying to set up some continuous deployment for my app to AWS Amplify.

For background, my project structure looks like this:

project
  public
    index.html
  src
    App.tsx/App.js
  package.json

As far as I know, this is basically what create-react-app gave me to start with, and I didn't change the file structure.

For most of my time working on the app, I've been able to go to the base project directory and use

npm start

to launch the app. This will bring me to the App.tsx/js homepage.

However, when I hosted this to AWS Amplify via GitHub, the default build settings actually point to the public directory, so the published site is actually point to index.html (which is basically just an empty placeholder).

While debugging, I ran

npm build 

in my root project directory, which constructed a build folder, so now the overall project looks like this:

project
  build
    index.html
  public
    index.html
  src
    App.tsx/App.js
  package.json

Now, running

npm start 

will bring me to the index.html from the build directory, instead of App.js/tsx as it used to.

The AWS setup says that it will run

npm build

so I assume that what I've done on my local machine is mirroring what the AWS server is doing behind the scenes and explains why AWS is serving the empty index.html.

I've read a few articles and watched some videos about hosting a create-react-app on AWS, and in every version, it looks like AWS will serve the App.tsx/App.js right out of the box, rather than build/index.html, and I've not been able to find a good guide on how to configure this behavior. Quite frankly, there is an overwhelming number of similar-but-slightly-different answers for questions like this, which use different combinations of package managers, packages, hosting services, all on different release versions, with different setups, and it's very difficult for me to tell which ones apply to my scenario.

So I'm hoping someone can help straighten some of this out for me, or point me towards a good resource for learning more about this type of thing. Particularly interested in learning the right way to do these things, rather than a quick hack around whatever my particular issue is.

Some specific questions...

• Is deploying things from a /build folder standard convention?
• Why does create-react-app create a separate /src/app.tsx and /public/index.html that seem to be competing with one another as the app's "homepage"?
• Why does the behavior of

npm start 

change depending on whether

npm build 

has been run?

• Is the correct fix here to just insert my App.tsx component into the index.html? This doesn't seem hard, but doesn't seem right either
• I have seen a lot of answers discussing tweaks to webpack.config.js to solve issues like this one. My project does have webpack installed, but as best I can tell, there is no webpack.config.js anywhere. Am I expected to create this file, or should it exist already? In either case, in which directory is it supposed to live? I've seen a couple answers saying it should be in /node_modules/webpack/, but also some saying it needs to live in the same directory as package.json

Things I've tried already: Spent a bunch of time reading through other StackOverflows and watching a few videos, but as outlined above, I'm finding it difficult to tell which could apply to my situation and which are unrelated, given the huge number of unique combinations of build/packages/platforms/versions. Also spent some time monkeying around with file structure/moving code around, but not very productively.

CodePudding user response：

For the basic create-react-app

---

npm start

Is a short command for react-scripts start that sets up the development environment and starts your development server usually localhost:3000

npm build

After you are done developing, this command short for react-scripts build correctly bundles your app for production and optimizes the build for the best performance.

The files generated in the build folder are solely the files you serve to the public folder accessible by the public URL.

In short the files in the build folder should be copied to the public folder

AWS Amplify

Provides a CI/CD process where you don't have to set all this up by yourself, as long as you have a well-configured package.json file.

There are so many methods to deploy your react app to a production server but using AWS Amplify this link might help you out: https://youtu.be/kKwyKQ8Jxd8

More on create-react-app deployment: https://create-react-app.dev/docs/deployment/

CodePudding user response：

Eventually found my issue. In the production built version of my app (aka, /build), the bundled script created by webpack was failing in the browser because exports was undefined, so index.html was being served in its vanilla state, rather than with the TSX/JSX content. I changed the "module" property in tsconfig.json from commonjs to es6 and this fixed most of the problems.

Also of note is that the reason I couldn't find my webpack.config.js is that I had hidden ALL js files in my project, so VSCode wasn't finding it. I swapped to the suggestion from this blogpost to hide only js files with a matching TS file.

For general learning about how create-react-app works, I eventually found this page, which I found helpful: https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/