Mern Project Folder structure help neeeded - reactjs

root/
├─ frontend/
├─ backend/
.gitignore
.git/
I have a root folder and inside of that root i have two folders one is frontend and another one is backend. and i have git initialize on the root folder. Now I want to deploy frontend on firebase and backend on the heroku. The problem is that to deploy backend on herko 'coz it'll ask me to git initialize. how to handle this situation.

Related

Having git problem in React django project

STATEMENT
I want to make project with django backend and React frontend. I have created a project using and then create a frontend react folder using create-react-app. Now I want to upload my projectname folder to my github repository. But when I add my files using git add . command from my root folder('projectname' folder). It shows some warnings given below. What should I do? Please help.
WARNING
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: git submodule add <url> frontend
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: git rm --cached frontend
COMMAND THAT I HAVE USED
$ virtualenv env
$ source env/bin/activate
$ pip install django
$ django-admin.py startproject projectname
$ cd django-react-demo
$ npm install -g create-react-app
$ create-react-app frontend
MY FOLDER STRUCTURE
projectname
│
└───frontend
│ ├──.node_modules
│ ├──public
│ ├──src
│ ├──gitignore
│ ├──README.md
│ ├──package.json
│ └──package_lock.json
│
│projectname
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
You are seeing that error because you have a git repository nested inside another repository.
Your main project directory projectname has a .git directory, and the directory nested inside it frontend has another .git repo that create-react-app created. The git repo inside another repo is called a submodule. It's possible to work with submodules, but it has its own quirks.
The easiest way to get around your error is to use only one git repo in your main project directory and delete the .git directory inside frontend directory. Try the following steps:
Go into the frontend directory.
cd frontend
Delete the .git directory inside frontend directory.
rm -rf .git
Go back to your main project directory.
You should now be able to track all files inside the frontend directory inside your main directory.
Maybe your react project i.e. frontend is also a git repository. So, what you can do is, put the frontend on the outside of the projectname folder and use the API key that you have from the backend in the frontend for your work.
You can follow this link:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react

How do I push a node project to GitHub that contains a create-react-app in a subfolder?

I'm currently working on my first MERN app. I have some issues regarding pushing my app to GitHub. My app file structure is as follows:
├───myApp
│ ├───server.js
│ ├───connection.js
│ ├───controls
│ ├───models
│ ├───client <-- create-react-app folder
I know that using create-react-app will run git init as well. So, if I try to get my full app on GitHub I will get a git repo inside a git repo:
Is there a way to remove git from the create-react-app and push my whole app to one repo?
Thanks
Fixed the issue by deleting the .git folder inside the client
On github, you will be able to deploy only the react app. Not your backend.
The easiest way is to deploy to a gh-branch branch the dist folder created by create-react-app when you run the build command.

create-react-app no longer watches changes to files

After upgrading to the newest version of create-react-app I've run into a bit of a big problem where web pack no longer watches for changes.
In my project I use node_modules to keep all of my project source code, and while I can import code from here without problems, web pack no longer watches this folder which means any changes made require restarting the project which is very frustrating.
bellow is an example of what my project structure looks like:
my-app/
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
node_modules/
my_app/
components/
ui/
resources/
styles/
images/
App.js
index.js
Again, creating an consuming a new component is no problem, but making changes no longer get updated live in the browser, and I can't seem to find what the solution is.
In react-scripts in create-react-app, there is a configuration for webpackDevServer; webpackDevServer.config.js
There the directory node_modules is ignored. Could you remove this and try out?

Deploy Yeoman full-stack app with Apache2 Reverse Proxy?

I have a Yeoman full-stack app #2.0.13 with the exact same directory structure as in this tutorial.
Everything works fine - grunt serve:dist etc works without any errors. Now I want to go in production and deploy the app on a apache server as example.com/xxx using mod_proxy. I copy the grunt build generated /dist directory to a home directory and start up the server app :
NODE_ENV=production node server/app.js
The app starts up, populating users and so on. Everything works well. Now I setup virtual host settings for the node app :
<Location /html/xxx/>
ProxyPass http://127.0.0.1:9000/
ProxyPassReverse http://127.0.0.1:9000/
</Location>
This sort of works. The weird thing is, that index.html from the dist directory is loaded correct
dist
├── public
│ ├── app
│ ├── assets
│ ├── bower_components
│ └─ index.html <---
|
└── server
├── api
├── auth
├── components
├── config
├── views
├─ app.js
└─ router.js
The proxyPass works, index.html is loaded - but the files index.html is referring to (the 4 assembled public/app files/ vendor.js, app.js and so on) is not. I get a 404 no matter what I have tried, no matter what setup from any guide I have tested
Have really spent many hours on this. To me it seems that the reverse proxy somehow alters the internal urls? The setup works if i replace dist/ with a node script that just listens on port 9000 and returns hello world.
What am I missing? Is there another way to do this?
So I was looking all over the place for quite some time as well but finally found this link:
Apache and Yeoman built NodeJS app on the Same Server... Virtual Hosts?
Which brought me on the right track, so I think what should fix it is to change the base tag in your header section of the index.hml file to:
<base href="/xxx/">
And they should be accessible, at least for me.
My vhost settings look like this:
<Proxy /xxx/*>
Order deny,allow
Allow from all
</Proxy>
ProxyPass /xxx http://127.0.0.1:6969/
ProxyPassReverse /xxx http://127.0.0.1:6969/
For anyone else having this problem I ended up using port 80. This works. In a node environment you not need or use a /www or apache / nginx anyway. So get rid of this and use
// Server port
port: process.env.OPENSHIFT_NODEJS_PORT ||
process.env.PORT ||
80,
in the yeoman production.js file. Thats it. An entire application can be served from within a user home/ directory without installing any kind of server http software. Just upload dist to anywhere on your server and use forever to run :
sudo NODE_ENV=production forever start server/app.js

possible to change where github pages looks for index.html?

I have a site generated with yeoman's generator-angular and I'd like to publish this site using github pages. I create the gh-pages branch but my repo does not show up in myusername.github.io/myreponame I think the reason is because index.html is in the app/ directory not the root.
app/
|-- index.html
|-- scripts/
dist/
Gruntfile.js
etc..
Can I tell github pages to load index.html from the app folder? How can I launch a site generated w/ angular-generator to gh pages?
Running grunt build is important as without it dist directory is not created. Also changes will appear on gh-pages only after they are added and pushed to the subtree.
Remove dist from .gitignore file
Run grunt build in console
After the project is built the dist directory needs to be added to the GitHub. Run this command in console: git add dist && git commit -m "Initial dist subtree commit"
And then push the subtree to the gh-pages branch: git subtree push --prefix dist origin gh-pages
All of your answers can be found here!
In a nutshell, you will generate the deployment-ready version of your site. You do this by running grunt. That will generate the optimized, production site in a folder called dist. You will then push the contents of dist directly to gh-pages.
A frequent contributor to Yeoman also made this task: grunt-build-control, which will let you simply run something like grunt deploy.

Resources