i have an existing project folder that contains project assets, some text files, &c. and we're having to use React on this one. when i run create-react-app . or npx create-react-app <folder>, it errors out saying i have to remove existing files because 'they might conflict'. SMH. how do i override this behaviour and force it to deploy? because i'm not doing this for every project we do...
and, no, this post has nothing useful to offer.
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
So I have a react practice project that I want to add in my github repo. I used create-react-app and there are many folders. I tried adding the whole project folder but it says the size is too big. Which folders should I put there? Also I want to be able to deploy it with netlify.
I'm creating a JS web app, and I know there are a lot of commands I use to set up my project: git init, npm init, etc. However, I also want to do two other things that sort of set up a barebones project for me: create-react-app and truffle init.
What exactly do each of these commands do, and what is the correct order I should run them in (truffle init I believe just creates some folders)?
I am mostly wondering if multiple package.json files are bad, or node_modules folders, or git files, since create-react-app seems to do some of things git init and npm init do. For one, I know create-react-app initiates a git repo. But I would like to put all react stuff in a "client" folder, and there are other things in the root of the directory. Is it bad to have nested git repos?
The short answer is: no, you shouldn't have multiple git files and node_modules folders and so on in your project (unless it's on purpose), simply because it makes it unclear which one your project should use.
git init creates a new git repository. You don't need to do this when using create-react-app and truffle init, because they already do it for you.
create-react-app creates a boilerplate for your project, and truffle is another boilerplate, so those shouldn't be used together. Pick one and stick with it.
When it comes to multiple git repos, there are different ways to do this depending on what you want. I suggest reading up on submodules, which is the intended way to have repos inside other repos. An alternative is to use a monorepo, which means using a single repo for multiple parts of the project, for example client and backend.
I'm working on a project built by someone else. I know it was bootstrapped by create-react-app because it says so in README.md.
However, I'm not sure if it has been ejected or not. There are many posts out there teaching you how to actually eject it, but I failed to find a way to check it in the first place. Any help is appreciated!
Some immediate giveaways that a create-react-app project has been ejected:
The dependencies field in package.json no longer contains react-scripts. Instead, it is populated with many additional packages like Babel, Eslint, Jess, Webpack and various Webpack loaders.
The absence of eject script.
The start, build and test no longer follows this format react-scripts start, react-scripts build etc.
A new directory named config appears.
Just sharing because you may or may not see all of these signs in your project as they were probably ejected a long time ago. I hope no one will spend two hours wondering why a certain package didn't work only to discover that the project has been ejected and the package only works with unejected ones.
Many thanks to #YuryTarabanko!
So I tried creating another project using CRA and ejecting it. Right after the ejection, a new directory called config popped up and there were some modifications in other directories, too.
Then I took a look at the project I'm actually interested in. The config directory is right there, with a structure similar to that config dir in the new project that popped up after the ejection. So I'm sure this project has been ejected, too!
Edit:
As Yuri pointed out in the comment:
The most noticeable difference IMHO would be the absence of eject command in package.json#scripts section though ;)
I somewhat agree with the script in package.json, but it could have easily been removed. If the project is in a repo, you should be able to look at the history of a few files to be certain.
I'm trying to upload my Yeoman Angular app to a git repo so that other developers can work on it. How do I go about it? Meaning, which files/folders should be uploaded and which can be skipped? I don't want the other developers to run the yo angular command, because it creates a new app with the folder name altogether. I tried copy pasting my folder contents to a new folder, excluded the node and bower modules, then ran npm install and bower install on this new folder. But now it fails to find phantomjs plugin. Is there a proper standard way to do what I'm trying to achieve?
Just pushed it as is. There is a .gitignore file which handles everything. The unwanted folders are automatically ignored.