00:00
-11:19

Elixir: Example React App - [007]

Having an example react project to test out our server side rendering solution is crucial to the development process. In this episode we will be showing you how to download the example project.

Head over to https://gitlab.com/artellectual/artellectual.gitlab.io so that we can clone it and use it in our project.

Cloning the Project

You can clone down the project using the following command

# cd into the botiful projectcd botifulgit clone https://gitlab.com/artellectual/artellectual.gitlab.io.git assets

We will also need to remove the git repo in the assets directory

rm -rf assets/.git

This ensures that we have 1 git repository in our project.

Running and Building

We need to be able to run and build the react project to first we'll need to run

yarn install

To start the dev server use

yarn run dev

To build the production assets

yarn run build

By default this will build the project into the assets/dist directory however we want to build into the botiful/priv/static directory. We'll need to change some configuration.

Configuring Build Location

To configure the build config for webpack go into assets/config/production.js and change.

new CleanWebpackPlugin(['static'], {   root: path.resolve(__dirname, '..', '..', 'priv')}),

We'll also need to change the output config in assets/config/output.js make sure you change the config to

path: resolve(__dirname, '..', '..', 'priv', 'static')

Whitelisting Static Assets

We also need to configure our elixir plug static to serve javascripts and stylesheets and other assets. In the lib/botiful.ex make sure plug static is configured like so.

plug Plug.Static,  at: "/",  from: {:botiful, "priv/static"},  only: ~w(index.html javascripts stylesheets assets)

That's it once this is all done we should be good to go!