CODEWITHSUNDEEP
javascriptreactjsdeploymentwebpackredux
Arga Aditya
Arga Aditya

Reputation: 191

webpack cannot resolve folders in reactjs app on deployment

I am creating a reactjs app and everything works fine on localhost. Things gets really problematic when I deployed the app to the hosting service.

I Have a ./reducers folder in my project which contains all of my reducers. the project structure is this:

now the problem is that webpack is unable to solve the import reducers from './reducers' on my store.js here is my full store.code:

import {applyMiddleware, createStore} from 'redux';

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';

import reducer from './reducers';

const middleware = applyMiddleware(promise(), thunk, logger())
  
export default createStore(reducer, middleware)

and here is my webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
	entry: './main.js',
	output:{
		path: __dirname,
		filename: 'index.js',
		publicPath: '/'
	},
	devServer:{
		inline: true,
		port: 1515,
		historyApiFallback: true
	},
	module:{
		loaders:[
		{
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel-loader',
			query:{
				presets: ['react', 'es2015'],
				plugins: ['react-html-attrs', 'transform-object-rest-spread']
			}
		}
		]
	}
}

and here's the error from my hosting server:

enter image description here

I'm really sorry for the ultra long post, I've been googling around and haven't found an answer that i can understand..deploying reactjs app and webpack is something new for me

Upvotes: 0

Views: 122

Answers (2)

Arga Aditya
Arga Aditya

Reputation: 191

Okay so after trying to digest every information that I got regarding this matter, I finally understand on how to deploy webpack project..

As mentioned by @JoeClay, I Should just deploy the final build from Webpack which is contrary to what I did. What I did is that I uploaded the whole project file into the hosting server and tried to run the webpack from there. I treated the production phase just like the local development phase which is not right.

After looking for so many information on the net on how to build a Webpack project I finally realized that this whole time I've got the build file with me. If we look back into my Webpack.config.js 

module.exports = {
	entry: './main.js',
	output:{
		path: __dirname,
		filename: 'index.js',
		publicPath: '/'
	},
	devServer:{
		inline: true,
		port: 1515,
		historyApiFallback: true
	},
	module:{
		loaders:[
		{
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel-loader',
			query:{
				presets: ['react', 'es2015'],
				plugins: ['react-html-attrs', 'transform-object-rest-spread']
			}
		}
		]
	}
}

We can see that in the output I have a filename of 'index.js' and every time I did things like npm start, It produces the 'index.js' on the directory. So it's always been there, I've just never paid much attention to it.

What I did next is easy, I go to my hosting server and upload my Index.html along with my CSS, JS and 'index.js' file and voila! It Works! But there is one problem that I haven't solve..Somehow after I Uploaded the file, inside my index.html file the <script src="index.js"></script> got commented out..I'd be so grateful if someone could give me an insight on this.

Hopefully this thread can help newbie webpack users like me and can help them deploy to hosting other than heroku or digitalocean. And thanks everyone who has spend their time answering my question

Upvotes: 1

Chris Hawkes
Chris Hawkes

Reputation: 12430

The problem is your reducers import is not found. You need to check your path relative to where your store is located.

Upvotes: 0

Related Questions