Walkthrough. Migrating framework from MAMP to Bedrock

Hi, I’m trying to migrate to Bedrock from OSX 10.7.5 MAMP installation. The reason: the new workflow with Gulp instead Grunt don’t sync with my browser. That problem was refered here but solution don’t works for me. So, I need to renew all my workflow.

I’m an old school designer with rudimentatry programming skills and I need more explanations than usually given in documentation. I lack of a lot of context that is needed to setup the framework and I don’t understand all the process and all the tools. I guess I’ll understand it on the fly. So, please, be patient and don’t close this thread until migration is completed. I’ll be posting here all my steps and questions. I hope this will be useful to some people like me.

This walkthrough was made starting from this installation guide

  1. First, I need to install PHP 5.5 (latest allowed in my OSX 10.7.5).
    As is explained here. [UPDATE Despite this PHP 5.5 installation I got this error. Finally I installed apache and PHP 5.4 through MacPorts. It seems to work].

  2. I install MySQL and create a db for my first project.

  3. I run apache server writing apachectl start at terminal or sharing web at pref panels.

  4. git clone of Bedrock at my own folder. Bedrock folder was created there.

  5. Then, I run composer install inside bedrock folder I gess is the correct place because it is the only folder with a composer.json file.

  6. Then, I go to rename and edit .env.example file inside bedrock folder. It is invisible because its name start with a dot so, It must be viewed with terminal. In MAMP framework I work over a localhost. It means that my WP installation is served at localhost. With MAMP I can change the localhost dir easily when I change the working project but now i setup apache vhost to deal with several local projects. My first project .env file looks like

    DB_NAME=telmo-merz
    DB_USER=aitor
    DB_PASSWORD=my_psw
    DB_HOST=localhost
    WP_ENV=development
    WP_HOME=http://telmo-merz.e451.net/
    WP_SITEURL=http://telmo-merz.e451.net/wp

  7. I git clone sage-master folder theme inside bedrock/web/app/themes/

  8. I get spanish translation .mo file and I put it into /app/themes/my-theme/lang/**

  9. I run npm install inside bedrock/web/app/themes/my_theme folder

  10. I run bower install

  11. I run gulp build without errors.

  12. I edit assets/manifest.json updating "devUrl": "http://my-project.net"

  13. I run gulp watch and WORKS!

Starting first Sage project

  1. At this point I’ve notice that default theme setup doesn’t includes nav walker bootstrap markup. Although it isn’t strictly required, I’ll install it for learning purposes following this walkthrough: How to restore the Bootstrap nav [walkthrough]
  2. I install and activate Soil, following this guide Soil | Cleaner WordPress Markup Plugin | Roots
  3. Restore old templates/header.php file http://pastebin.com/fr15YW0m
  4. Download nav-walker bootstrap GitHub - wp-bootstrap/wp-bootstrap-navwalker: A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.
  5. Copy wp_bootstrap_navwalker.php to my_theme/lib/
  6. Update $sage_includes into functions.php with 'lib/wp_bootstrap_navwalker.php', // Bootstrap nav walker

Dead end. Starting bedrock-ansible way.

  1. Following this installation guide GitHub - roots/roots-example-project.com: Example Roots stack project (Trellis, Bedrock, Sage)
3 Likes

This isn’t MAMP specifc, per se, but it has been helping me where the official bedrock docs left off.

1 Like
  1. :white_check_mark:
  2. :white_check_mark:
  3. Local Apache will work. Vagrant box might be better in long run. You can try https://github.com/roots/bedrock-ansible
  4. :white_check_mark:
  5. :white_check_mark:
  6. :white_check_mark: Yes this is where you run it
  7. You can’t use multiple projects all at just localhost. You at least need subdirectories which can get a little complex (in terms of Apache configuration). WP_SITEURL always needs the wp/ directory. I suggest using “fake” dev domains like “project.dev” instead of localhost.
  8. :white_check_mark:
1 Like

Thanks! I am learning now to setup apache vhosts. I’ll update step 7 soon with my results.

New question at step 9. Where to put .mo file?

For the theme? There isn’t anything different about that versus any other WP install

1 Like

Usually there is a themes/my-theme/languages folder but I can see a folder called lang. I gess it is the folder for the .mo file and a line inside functions.php must be write:

load_theme_textdomain('sage', get_template_directory() . '/lang');

Is it true?

https://github.com/roots/sage/blob/master/lib/init.php#L13

1 Like

After Soil install I lost all css in the site. See this screencapture http://cl.ly/image/1Y0R1n2j3C18

I did last steps from this walkthrough (see first post). What am I doing wrong? Forget I something?

It looks like you haven’t ran gulp build yet.

Run gulp build - then run gulp watch, and you should be good to go.

1 Like

Thanks for your answer. I did it, build and watch. If you look at screencapture you can see localhost:3000 at url.

Just in case, I did build and watch again, but the problem persist. Any idea?

I have checked that deactivating soil everything works (except soil, obviously)

Your .env has the following:

WP_HOME=http://telmo-merz.e451.net/
WP_SITEURL=http://telmo-merz.e451.net/wp

But that screenshot has you accessing the site on http://localhost:3000 so you’ll be getting 404s for assets.

If http://telmo-merz.e451.net/ is your WP_HOME then use that for browsing the site.

1 Like

I can do it but when I run gulp watch a new window automatically opens to listen changes, with this url: http://localhost:3000

It happens despite I have this line at manifest.json: "devUrl": "http://telmo-merz.e451.net"

So, I can’t listen at http://telmo-merz.e451.net/

You can use either URL to view the site. localhost:3000 is the Broswersync proxy to the site, and will only be available when gulp watch is running. But that’s the URL you should use for the Livereload effect

You put the correct URL for devUrl

1 Like

Ok, so, finally, I seem to have found a dead end. Next try will be bedrock-ansible. I hope Vagrant virtualized boxes will fix this issue because is a system independant of my own system. To be completely clear, the problem is that: activating Soil plugin cause of lack of css, as is shown here: http://cl.ly/image/1Y0R1n2j3C18. Deactivating Soil, all becomes normal.

Sorry didn’t read everything, but in case you didn’t try: refreshing the permalinks settings (resave) solves this problem for me most of the time.

Ping @QWp6

(20 chars)

Thank you for your answer. Resaved permalinks settings, problem remains.