CODEWITHSUNDEEP
node.jsreactjsexpressfile-uploadcloud
user12864972
user12864972

Reputation:

Accessing user uploaded images in a deployed MERN app

I am a relatively new developer and I have made a personal blog app, where a user can create a post and upload an image to use as the thumbnail for that post.

So far the backend and frontend work brilliantly and I am able to get the image, store it locally in a folder on my machine, store the file path in MongoDB and then access it and display it in the UI accordingly.

Now that I'm looking to finally deploy my application I have to figure out a way to upload images to an online cloud storage or something, where I can access them from my frontend as well.

Any suggestions on a good service of this kind and if possible, something free, suitable for my small project? Or any suggestions on an alternative way of dealing with this situation?

Any advice will be greatly appreciated!

Thanks in advance!

NOTE: I plan on deploying my app with Heroku, so if you've ever dealt with this issue directly using Heroku, please share your experience.

Upvotes: 1

Views: 637

Answers (1)

djs
djs

Reputation: 4065

Yes, I have several apps that do just this! Sign up for a free MongoDB Atlas account and then you can store the data on their servers and point your Express app to the connection URL. Basically, they will give you a URL like this:

mongodb+srv://your-cluster-name:[email protected]/blog-app?retryWrites=true

Which you can then store in a .env file like this:

MONGODB_URL=mongodb+srv://your-cluster-name:[email protected]/blog-app?retryWrites=true

And access from your app like so:

mongoose.connect(process.env.MONGODB_URL, connectionOptions)
  .catch((err) => {
    console.log('Error on initial DB connection: ', err);
  });

You'll need to load the .env files in your app using an npm packages such as dotenv on the development side. For heroku, you can use the heroku-cli and set any environment variables for your app like so:

heroku config:set MONGODB_URL=mongodb+srv://your-cluster-name:[email protected]/blog-app?retryWrites=true

Note, the development MongoDB URL could be a connection string to a local instance, such as:

MONGODB_URL=mongodb://localhost:27017/my-blog-app

And the one for heroku can be the MongoDB Atlas cluster.

There are a few other config things to do for Node apps, like having a 'start' script in package.json, which for Express apps created with express-generator looks like:

  "scripts": {
    "start": "node ./bin/www"

But for your case may be different. It should point to whatever file is the entry point for your server.

You'll also need to set the PORT from process.env.PORT, which heroku will set on their end, and on your end you can just default to 3000:

const PORT = process.env.PORT || 3000;
app.listen(PORT);

If you have any questions, feel free to PM me or just ask here and I can elaborate further. It can be intimidating the first few times, but it's actually really easy to deploy stuff to heroku this way once you get the hang of it! You can also check out the heroku docs for deploying Node apps.

Upvotes: 1

Related Questions