Viet Phan X

How to Change Django React Project Name

👨‍💻 Software Development
2782
Jul 12, 2019

Have you ever wondered how to easily change the project name of your Django React stack?

I did.

Every time I start a new project, I choose the first silly name, that comes to my mind.

But as time goes by, it can happen, that you completely change the scope of the project and your project name become obsolete.

What was formerly known as "amazon_for_gardeners" could be "uber_for_craft_beer" the next day?

In the early ages of the internet, you could easily rename your web project folder without any consequences.

But today, the complexity of an average web app project grew thousandfold.

Before you can write a single line of code, you have to set up virtual environments, web frameworks, javascript compilers, CSS compilers, web servers, proxy servers, databases, and git versioning.

It is no wonder, that something simple as renaming the project folder can break your stack.

So I would like to share some tips on how I changed my Django React stack project folder name.

There are multiple caveats we have to keep in mind.

  • Django dependencies
  • React dependencies
  • Virtual environment dependencies
  • Database dependencies
  • File system dependencies
  • Git dependencies
  • Web server dependencies
  • Proxy server dependencies
  • Host configurations

Django

Lets's start with the Django project structure.

You can safely rename your Django project folder and Django app folder like so.

project_name/
         manage.py 
         project_name/ 
                 __init__.py 
                 settings.py 
                 urls.py 
                 wsgi.py

To.

new_project_name/
         manage.py 
         new_project_name/ 
                 __init__.py 
                 settings.py 
                 urls.py 
                 wsgi.py

Then rename some variables in settings.py, that is located at

/new_project_name/new_project_name/settings.py
ALLOWED_HOSTS = ['new_project_name.local', '127.0.0.1']

ROOT_URLCONF = 'new_project_name.urls'

WSGI_APPLICATION = 'new_project_name.wsgi.application'

STATIC_ROOT = '/new_project_name/new_project_name/static/'

MEDIA_ROOT = '/new_projecT_name/new_project_name/static/images/'

In wsgi.py change the following lines.

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'new_project_name.settings')

In manage.py apply a new project name too.

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'new_project_name.settings')

If you have a Celery package installed, then don't forget to change celery.py too.

/new_project_name/new_project_name/celery.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'new_project_name.settings')

app = Celery('new_project_name’)

Gunicorn sever

Your Gunicorn sever needs treatment too.

In config file gunicorn.conf.py located at...

/new_project_name/gunicorn.conf.py

Change...

bind = "new_project_name.local:9010"

errorlog = '/new_project_name/new_project_name/logs/gunicorn-error.log'

accesslog = '/new_project_name/new_project_name/logs/gunicorn-access.log'

Nginx server

Find your Nginx conf file. On Mac, it is located at...

/usr/local/etc/nginx/nginx.conf

And change host variables to reflect your new project name.

server_name new_project_name.local;

access_log /new_project_name/new_project_name/logs/access.log;

/new_project_name/new_project_name/logs/error.log;

proxy_pass http://new_project_name.local:9010;

root /new_project_name/new_project_name/;

Don't forget to restart Nginx afterward.

sudo brew services restart nginx

SQLite database

In the Django database, find a table named django_site and change values in both the "name" and "domain" column.

Or use this handy update select.

update django_site set name = "new_project_name.local", domain = "new_project_name.local;
commit;

Local Host

Find the configuration file for your local hosts.

On Mac, it is located at...

/private/etc/.host

There change in your local hostname variable.

new_project_name.local

Pipenv virtual environment

Previously, we renamed the Django project folder, which is tightly tied to the Pipenv virtual environment folder.

Unfortunately, python virtual environments use hashed project folder name as a unique id.

Therefore we cannot simply rename the virtual environment folder to reflect the new project name.

If you try to run a shell on a new project name folder like so.

pipenv shell

Then Pipenv won't recognize the renamed virtual environment folder and will create a new one with a different unique hash.

The new python virtual environment will lack any packages you have installed so far.

To reinstall all packages listed in Pipfile with the following command.

pipenv install

React and javascript stack

Lastly, find package.json in your Django React stack.

Package.json is used for compiling your React code to a static javascript file, that can be served by Django.

I have it located in my project here.

/new_project_name/package.json

There change the following variables...

"scripts": {
    "dev": "webpack --mode development ./new_project_name/react/src/index.js --output ./new_project_name/react/static/frontend/main.js",
    "build": "webpack --mode production ./new_project_name/react/src/index.js --output ./new_project_name/react/static/react/main.js",
    "flush": "pipenv run python ./new_project_name/manage.py flush --no-input"
  },

That's it!

Now everything should be fully functional and ready to go.

The only thing left is your Git repository.

But I have to still figure out how.

Update a day after Renaming Git repository

So it turns out, that Git does not hold any references to project folder names. 

What I had to do was to go to Gitlab.com and in the settings, change the project name and change the Git repository URL path.

Then if you are using Git GUI like GitKraken, just open new repo by choosing the renamed project folder.

Hope this article helped you, so please share and comment if you liked it.

Seen you in the next post.


You need a

Innovation Advisor

Fresh eyes help generate new perspectives. Book a free call in which we identify hidden opportunities.

15 min call

Get product feedback


If You Like what I do
You can buy me a coffee 👇
Send via PayPalSend with Bitcoin

🤙 Let's connect

Made by Viet Phan © 2018-2024Privacy Policy